Using Expansion Tile with ListView in Flutter

10,656

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,
        ),
      ),
    ],
  );
}
Share:
10,656

Related videos on Youtube

pksasso
Author by

pksasso

Updated on June 04, 2022

Comments

  • pksasso
    pksasso almost 2 years

    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,),),
        ],
      );
    }