pksasso
pksasso

Reputation: 429

Using Expansion Tile with ListView in Flutter

I'm trying to build the app from this image, but when i put the ListView in the same page with this Expansion Tile the screen become empty.

I added shrinkwrap: true and worked, but now I have a new problem, bottom overflowed when I open the ExpansionTile or when I have many option on ListView

Follow is the tried code: I'll make a ListBuilder after

    class HomeState extends State<Teste>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text (""),
      ),
        body: Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
              CardList(),
              MyList()
            ],
          ),
        ),
    );
  }
}

Widget CardList(){
  return new Flexible(
      child: Card(
        child: ExpansionTile(
          title: Text("Periodo",
            style: new TextStyle(
            ),textAlign: TextAlign.center,
          ),
          children: <Widget>[
            ListTile(
              title: Text("Periodo 1",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 2",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 3",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 4",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 5",textAlign: TextAlign.center,),
            ),ListTile(
              title: Text("Periodo 6",textAlign: TextAlign.center,),
            ),ListTile(
              title: Text("Periodo 7",textAlign: TextAlign.center,),
            ),ListTile(
              title: Text("Periodo 8",textAlign: TextAlign.center,),
            ),
          ],
        ),
      )
  );
}

Widget MyList(){
  return new ListView(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    children: <Widget>[
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
    ],
  );
}

Upvotes: 2

Views: 12614

Answers (1)

anmol.majhail
anmol.majhail

Reputation: 51176

Updated Code with no Error -

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
      ),
      body: Container(
        padding: EdgeInsets.all(15.0),
        child: Column(
          children: <Widget>[Flexible(child: CardList()), Flexible(child: MyList())],
        ),
      ),
    );
  }
}

Widget CardList() {
  return SingleChildScrollView(
    child: Card(
      child: ExpansionTile(
        title: Text(
          "Periodo",
          style: new TextStyle(),
          textAlign: TextAlign.center,
        ),
        children: <Widget>[
          ListTile(
            title: Text(
              "Periodo 1",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 2",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 3",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 4",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 5",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 6",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 7",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 8",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 9",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 10",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 11",
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    ),
  );
}

Widget MyList() {
  return new ListView(
    shrinkWrap: true,
    children: <Widget>[
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
    ],
  );
}

Upvotes: 4

Related Questions