Flutter: How to build a Layout with two Columns/ ListViews side by side with fixed headers for each ListView?

Question

Im very new to flutter and the dart language and I'm trying to build a dashboard with two scrollable columns (that's why I choose a ListView) side by side and each ListView should have a fixed header. Everything works fine, but every time I change something I get an "EXCEPTION CAUGHT BY RENDERING LIBRARY".

Container(
    child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
            //Start first Column
            Expanded(
                child:ListView(
                    children: [
                        //Start Header for frist Column 
                        Container(
                            width: double.infinity,
                            decoration: BoxDecoration(                                  color: Colors.grey,
                                border: Border(
                                    bottom: BorderSide(),
                                    right: BorderSide(),
                                ),
                            ),
                            child: Text(
                                'First Column',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontSize: 30,
                                    fontFamily: 'Futura',
                                ),
                            ),
                        ), //End Header for first Column 
                        //Start Cards
                        OutlinedCardExample(),
                        OutlinedCardExample(),
                        //End LiveCards                                 
                    ],
                            ),
                ),//End first Column 

                //Start second Column
                Expanded(
                    child:ListView(
                        children: [
                            //Start Header for second Column 
                            Container(
                                width: double.infinity,
                                decoration: BoxDecoration(
                                    color: Colors.green,
                                    border: Border(
                                        bottom: BorderSide(),
                                        right: BorderSide(),
                                    ),
                                ),
                                child: Text(
                                    'Second Column',
                                    textAlign: TextAlign.center,
style: TextStyle(
    fontSize: 30,
    fontFamily: 'Futura',
),
),
),//Start Header for second Column 
//Start Cards
                                        OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),                                      OutlinedCardExample(),
//End Cards
],
),
),//End second Column Bestellungen 

],
),
),

enter image description here How can I fix the header of the Listview?

Answer 1

The structure will be like

 return Scaffold(
      body: Row(
        children: [
          //Start first Column
          Expanded(
            child: Column(
              children: [
                buildHeader('First Column'),
                Expanded(
                  child: ListView(
                    controller: controller1,
                    children: [
                      for (int i = 0; i < 44; i++)
                        ListTile(
                          title: Text("item $i"),
                        )
                    ],
                  ),
                ),
              ],
            ),
          ),
          //End first Column

You can follow this widget

class FAs4 extends StatefulWidget {
  const FAs4({super.key});

  @override
  State<FAs4> createState() => _FAs4State();
}

class _FAs4State extends State<FAs4> {
  final controller1 = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          //Start first Column
          Flexible(
            flex: 1,
            child: Column(
              children: [
                buildHeader('First Column'),
                Expanded(
                  child: ListView(
                    controller: controller1,
                    children: [
                      for (int i = 0; i < 44; i++)
                        ListTile(
                          title: Text("item $i"),
                        )
                    ],
                  ),
                ),
              ],
            ),
          ),
          //End first Column
          Flexible(
            flex: 1,
            child: Column(
              children: [
                buildHeader('Second Column'),
                Expanded(
                  child: ListView(
                    children: [
                      for (int i = 0; i < 44; i++) Text("item $i"),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Container buildHeader(String label) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.grey,
        border: Border(
          bottom: BorderSide(),
          right: BorderSide(),
        ),
      ),
      child: Text(
        label,
        textAlign: TextAlign.center,
      ),
    );
  }
}