Visual bug with showModalBottomSheet

42 views Asked by At

In the app I'm building, you can choose the type of workout set via modal bottom sheet, however, it's causing some visual problems (the debug console is empty). Here are the screenshots before I do something, when I click the IconButton and when I'm scrolling the listView.builder. enter image description here

enter image description here

enter image description here

The code of this section is not complicated: there is a button that opens the modal bottom sheet which contains a listView.builder. Its child is a row and the row's children are an inkwell row (with two pieces of text) and an icon button (the question mark).

Here is the code of the first button:

Expanded(
            child: InkWell(
              onTap: () {
                showModalBottomSheet(
                    backgroundColor: Theme.of(context)
                        .colorScheme
                        .background
                        .withOpacity(.8),
                    context: context,
                    builder: (context) {
                      return SetTypeSelect(
                          voidCallback: () {
                            setState(() {});
                          },
                          set: set);
                    });
              },
              child: Text(
                widget.workout.exerciseList[widget.exerciseIndex]
                    .setList[widget.index].setType.title.characters.first
                    .toUpperCase(),
                style: Theme.of(context).textTheme.bodyLarge!.copyWith(
                      color: setP
                          .getTextStyle(
                              widget.workout.exerciseList[widget.exerciseIndex]
                                  .setList[widget.index].setType.category,
                              context)
                          .color,
                      fontWeight: FontWeight.bold,
                    ),
                textAlign: TextAlign.center,
              ),
            ),
          ),

And the code in the modal bottom sheet:

class SetTypeSelect extends StatefulWidget {
  const SetTypeSelect({
    super.key,
    required this.voidCallback,
    required this.set,
  });

  final VoidCallback voidCallback;
  final SetW set;

  @override
  State<SetTypeSelect> createState() => _SetTypeSelectState();
}

class _SetTypeSelectState extends State<SetTypeSelect> {
  final List<String> explText = [
    'Normal Set',
    'Failure Set',
    'Drop Set',
    'Klauster Set',
    'Rest Pause',
    'Warmup Set',
  ];
  @override
  Widget build(
    BuildContext context,
  ) {
    return Container(
      padding: const EdgeInsets.all(12),
      child: ListView.builder(
        itemCount: setTypes.length,
        itemBuilder: (context, index) => Container(
          padding: const EdgeInsets.all(15),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InkWell(
                onTap: () {
                  setState(() {
                    widget.set.setType = SetType(
                      title: setTypes[index],
                      category: SetTypes.values[index],
                    );
                    widget.voidCallback();
                    Navigator.of(context).pop();
                  });
                },
                child: Row(
                  children: [
                    SizedBox(
                      width: 50,
                      child: Text(
                        setTypes[index].characters.first.toUpperCase(),
                        style: style(context).values.elementAt(index),
                        textAlign: TextAlign.start,
                      ),
                    ),
                    Text(
                      explText[index],
                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                          color: Theme.of(context).colorScheme.onBackground,
                          fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
              ),
              IconButton(
                  onPressed: () {
                    print('cia');
                  }, icon: Icon(CupertinoIcons.question_circle))
            ],
          ),
        ),
      ),
    );
  }
}
0

There are 0 answers