Any reason why my list is scrolling behind the image and list-tiles misses its texts ?

[RoarGronmo]

See pictures:

web:

native:

It should rather scoll up to the image, not behind.

This happens also to the "navigation bar" below.

It is coded like this:

onbarding.dart:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_settings_screens/flutter_settings_screens.dart';
import 'package:introduction_screen/introduction_screen.dart';
import 'package:mwork/screens/home/home.dart';
import 'package:mwork/screens/onboarding/pick_country.dart';
import 'package:mwork/screens/onboarding/pick_firm.dart';
import 'package:mwork/screens/onboarding/pick_office.dart';
import 'package:mwork/screens/settings/setting_keys.dart';
import 'package:mwork/services/api/generated/mwork_api.swagger.dart';
import 'package:mwork/services/api/interface/mwork_api.interface.dart';

class OnBoardingPage extends StatefulWidget {
  const OnBoardingPage({Key? key}) : super(key: key);

  @override
  _OnBoardingPageState createState() => _OnBoardingPageState();
}

class _OnBoardingPageState extends State<OnBoardingPage> {
  final introKey = GlobalKey<IntroductionScreenState>();
  final countryKey = GlobalKey();

  void _onIntroEnd(context) {
    Navigator.of(context).push(
      MaterialPageRoute(
          builder: (_) => HomePage(
                title: 'mWork',
              )),
    );
  }

  Widget _buildImage(String assetName, [double width = 350]) {
    return Image.asset('assets/icons/$assetName', width: width);
  }

  @override
  Widget build(BuildContext context) {
    const bodyStyle = TextStyle(fontSize: 19.0);

    const pageDecoration = PageDecoration(
      titleTextStyle: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w700),
      bodyTextStyle: bodyStyle,
      descriptionPadding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 16.0),
      pageColor: Colors.black12,
      imagePadding: EdgeInsets.zero,
    );

    return IntroductionScreen(
      key: introKey,
      globalBackgroundColor: Colors.white,
      globalHeader: Align(
        alignment: Alignment.topRight,
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(top: 16, right: 16),
            child: _buildImage('logo.png', 100),
          ),
        ),
      ),

      pages: [
        PageViewModel(
          title: "mWork",
          body: "Arbejde tager tid, tid er penge.\n"
              "Arbete tar tid, tid är pengar.\n"
              "Arbeid tar tid, tid er penger.\n"
              "Arbeit braucht Zeit, Zeit ist Geld.\n\n"
              "Vi hjælper altid.\n"
              "Vi hjälper alltid till.\n"
              "Vi hjelper alltid.\n"
              "Wir helfen immer.",
          image: _buildImage('img1.jpg'),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: "Vælg land. Välj land. Velg land. Land auswählen.",
          bodyWidget: FutureBuilder(
              future: getCountry(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  //TODO: Should show Circular progressbar ?
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
                return PickCountry(snapshot.data as List<int>,
                    notifyParent: refresh);
              }),
          image: _buildImage('img3.jpg'),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title:
              "Vælg din virksomhed. Välj ditt företag. Velg firmaet ditt. Wählen Sie Ihr Unternehmen.",
          bodyWidget: FutureBuilder(
              future: getFirms(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  //TODO: Should show Circular progressbar ?
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
                return PickFirm(snapshot.data as List<Frm>,
                    notifyParent: refresh);
              }),
          image: _buildImage('img2.jpg'),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title:
              "Vælg dit kontor. Välj ditt kontor. Velg kontoret ditt. Wähle dein Büro.",
          bodyWidget: FutureBuilder(
            future: getOffices(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                //TODO: Should show Circular progressbar ?
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
              return PickOffice(snapshot.data as List<R10>,
                  notifyParent: refresh);
            },
          ),
          image: _buildImage('img2.jpg'),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: "Færdig! Så er mWork klar til brug!\n"
              "Färdiga! Då är mWork redo att användas!\n"
              "Ferdig! Da er mWork klar til bruk!\n"
              "Fertig! Dann ist mWork einsatzbereit!",
          bodyWidget: Row(
            mainAxisAlignment: MainAxisAlignment.center,
          ),
          decoration: pageDecoration.copyWith(
            bodyFlex: 2,
            imageFlex: 4,
            bodyAlignment: Alignment.bottomCenter,
            imageAlignment: Alignment.topCenter,
          ),
          image: _buildImage('img1.jpg'),
          reverse: true,
        ),
      ],
      onDone: () => _onIntroEnd(context),
      //onSkip: () => _onIntroEnd(context), // You can override onSkip callback
      showSkipButton: true,
      skipFlex: 0,
      nextFlex: 0,
      //rtl: true, // Display as right-to-left
      skip: const Text('Hopp over'),
      next: const Icon(Icons.arrow_forward),
      done: const Text('Ferdig', style: TextStyle(fontWeight: FontWeight.w600)),
      curve: Curves.fastLinearToSlowEaseIn,
      controlsMargin: const EdgeInsets.all(16),
      controlsPadding: kIsWeb
          ? const EdgeInsets.all(12.0)
          : const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
      dotsDecorator: const DotsDecorator(
        size: Size(10.0, 10.0),
        color: Color(0xFFBDBDBD),
        activeSize: Size(22.0, 10.0),
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(25.0)),
        ),
      ),
      dotsContainerDecorator: const ShapeDecoration(
        color: Colors.black87,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        ),
      ),
    );
  }

  Future<List<Frm?>?> getFirms() async {
    List<Frm?>? firms = await ApiService().getFirms(
        ctry:
            int.tryParse(Settings.getValue(SettingKey.userCountryCode, "-1")));
    return firms;
  }

  Future<List<int?>?> getCountry() async {
    List<int?>? ctry = await ApiService().getFirmCountries();
    return ctry;
  }

  Future<List<R10?>?> getOffices() async {
    List<R10?>? offices = await ApiService().getFirmsOffices(
        frmNo: int.tryParse(Settings.getValue(SettingKey.userFirmNo, "-1")));
    return offices;
  }

  refresh() {
    setState(() {});
  }
}

// create a class user with fields firm,office,country and department
class User {
  String firm;
  String office;
  String country;
  String department;

  User(this.firm, this.office, this.country, this.department);

  //create setters and getters
  setFirm(String firm) {
    this.firm = firm;
  }

  setOffice(String office) {
    this.office = office;
  }

  setCountry(String country) {
    this.country = country;
  }

  setDepartment(String department) {
    this.department = department;
  }

  String getFirm() {
    return this.firm;
  }

  String getOffice() {
    return this.office;
  }

  String getCountry() {
    return this.country;
  }

  String getDepartment() {
    return this.department;
  }
}

and here the pick_firm part which the problem is most significant, it happens to the other two pages too, where there are similar setups: pick_firm.dart

import 'package:flutter/material.dart';
import 'package:flutter_settings_screens/flutter_settings_screens.dart';
import 'package:mwork/screens/home/home.dart';
import 'package:mwork/screens/settings/setting_keys.dart';
import 'package:mwork/services/api/generated/mwork_api.swagger.dart';
import 'package:mwork/utils/utils.dart';

class PickFirm extends StatefulWidget {
  final List<Frm> data;
  final Function() notifyParent;
  const PickFirm(this.data, {required this.notifyParent, Key? key}) : super(key: key);

  @override
  _PickFirmState createState() => _PickFirmState();
}

class _PickFirmState extends State<PickFirm> {
  int selectedFirmIndex = -1;

  int selectedFirmNo = -1;

  @override
  Widget build(BuildContext context) {
    List<Frm> firms = widget.data;

    selectedFirmNo = int.parse(Settings.getValue(SettingKey.userFirmNo, "-1"));

    selectedFirmIndex = firms.indexWhere((element) => element.frmNo == selectedFirmNo);

    print("selectedFirmNo = $selectedFirmNo");
    print("selectedFirmIndex = $selectedFirmIndex");

    return ListView.separated(
      padding: const EdgeInsets.all(8),
      itemCount: firms.length,
      physics: const ScrollPhysics(),
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return ItemTile(
          firm: firms[index],
          isSelected: selectedFirmIndex == index,
          index: index,
          setSelected: setSelected,
        );
      },
      separatorBuilder: (BuildContext context, int index) => const Divider(),
    );
  }

  setSelected(int index) {
    selectedFirmIndex = index;
    print("index selected: $index");
    print("userFirmNo selected: ${widget.data[index].frmNo}");

    Settings.setValue(SettingKey.userFirmNo, (widget.data[index].frmNo).toString())
        .whenComplete(() => {
          setState(() {}),
          widget.notifyParent()
        });
  }
}

//create class ItemTile
class ItemTile extends StatelessWidget {
  Frm firm;
  bool isSelected;
  int index;
  Function setSelected;

  ItemTile(
      {Key? key,
      required this.firm,
      required this.isSelected,
      required this.index,
      required this.setSelected})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        setSelected(index);
      },
      tileColor: Colors.blue[100],
      selected: isSelected,
      selectedTileColor: Colors.blue[300],
      title: Text(firm.frmNo.toString(),
          style: TextStyle(color: Colors.blue[900])),
      subtitle: Text(firm.nm.toString()),
    );
  }
}

[Pyozer]

Hi, sorry no idea.. Maybe your list can be the issue but not sure.

Have you found a solution since?

[ghenry]

Hi @RoarGronmo

I'm going to close this as its been over a year now and we presume you're all OK.

Thanks, Gavin.

[RoarGronmo]

Thats ok

ons. 23. nov. 2022, 17:56 skrev Gavin Henry @.***>:

Closed #100 https://github.com/Pyozer/introduction_screen/issues/100 as completed.

— Reply to this email directly, view it on GitHub https://github.com/Pyozer/introduction_screen/issues/100#event-7879119738, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACVSTECXJJ4M2KPSEGIFEULWJZEEDANCNFSM5LMCTIRA . You are receiving this because you were mentioned.Message ID: @.***>