CODEWITHSUNDEEP
flutterdart
stacktrace2234
stacktrace2234

Reputation: 1500

Flutter SingleChildScrollView containers are showing even if it not supposed to?

The bottom side of the scrollview goes behind the buttons that are at the bottom.

As you can see for some reason if I scroll it, the containers are shown behind the buttons. The text disappears but the background color can be seen. I don't find it why it is doing it.

 createNotes() {
    return Container(
      decoration: borderBoxDecoration(),
      child: ListTile(
        tileColor: Colors.yellow,
        title: Text(
          "Events",
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.w600,
          ),
        ),
        subtitle: Text("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
          maxLines: 5,
          overflow: TextOverflow.ellipsis,
        ),
        onTap: () => func(),
      ),
    );
  }


  addPadding() {
    return  Padding(
      padding: EdgeInsets.all(4),
    );
  }

 BoxDecoration borderBoxDecoration() {
    return BoxDecoration(
      border: Border.all(color: Colors.black, width: 1),
    );
  }

Upvotes: 0

Views: 93

Answers (1)

Yauheni Prakapenka
Yauheni Prakapenka

Reputation: 1734

Good day! If i understand correctly, try replace this part of code on this:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
        child: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Column(
            children: [
              addPadding(),
              createNotes(),
              addPadding(),
              createNotes(),
              addPadding(),
              createNotes(),
              addPadding(),
              createNotes(),
              addPadding(),
              createNotes(),
              addPadding(),
              createNotes(),
              addPadding(),
              createNotes(),
              addPadding(),
              createNotes(),
              addPadding(),
            ],
          ),
        ),
      ),
      Container(
        color: Colors.white,
        child: Column(
          children: [
            TextButton(
              onPressed: () {},
              child: Text('Name one'),
            ),
            TextButton(
              onPressed: () {},
              child: Text('Name two'),
            ),
            Container(
              height: 4,
            ),
            TextButton(
              onPressed: () {},
              child: Text('Name three'),
            )
          ],
        ),
      ),
    ],
  ),
);
}

result video: https://media.giphy.com/media/OVQSeYkCEG37VT2mCX/giphy.gif

full code: https://codeshare.io/K88jMP

Upvotes: 1

Related Questions