Row widget contents are not getting displayed

Question

I am trying to build an app which retrieves all the table data and display it on the screen.I have made it using a list builder widget .I wanted to add a header to each of the rows retrieved .I tried adding a row widget which contains the header.But it is not getting displayed . Here is what the out List looks like

I wanted add did dname and age Header by making a row ..but its not visible

Here is what my code looks like

  // build list view & its tile
  ListView _buildPosts(BuildContext context, List posts) {
    print('Hi');
    Row(//This row is not getting displayed
      children: [
        Container(
         child: const Text('Did',
           style: TextStyle(
             color: Colors.white,
           ),
         ),
        ),
        Container(
          child: const Text('Dname',style: TextStyle(
            color: Colors.white,
          ),),
        ),
        Container(
          child: const Text('Age',style: TextStyle(
            color: Colors.white,
          ),),
        ),
      ],
    );
    return ListView.builder(
      itemCount: posts.length,
      padding: const EdgeInsets.all(20),
      itemBuilder: (context, index) {
        return Card(
          shadowColor: Colors.white,
          color:const Color(0xFF303030),
            elevation: 1,
              child: IntrinsicHeight(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(posts[index].Did,style: const TextStyle(fontWeight: FontWeight.bold,
                    color:Colors.white,),),
                    Text(posts[index].Dname,style: const TextStyle(fontWeight: FontWeight.bold,
                      color:Colors.white,),),
                    Text(posts[index].Age,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
                    ),
                  ],
                ),
              ),
          );
      },
    );
  }
}
class HttpService {
  Future> getPosts() async {
    Response res = await get(
        Uri.parse('http://localhost/localconnect/driver_change.php'));
    print(res.body);
    if (res.statusCode == 200) {
      List body = jsonDecode(res.body);
      List posts = body.map(
            (dynamic item) => Post.fromJson(item),
      ).toList();
      return posts;
    } else {
      throw "Unable to retrieve posts.";
    }
  }
}

user_7421030 · Answer

It can't be displayed because it isn't used anywhere! Your _buildPosts() only returns Listview.builder(). Wrap your List view.builder() inside a Column, then move your Row() inside that Column() above Listview.builder().

user_6995566 · Answer

The best and optimal solution for your case is use DataTable .It makes table data visualization so simple and it is very easy to use

@override
Widget build(BuildContext context) {
return DataTable(
  columns: const [
    DataColumn(
      label: Text(
        'Did',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
    DataColumn(
      label: Text(
        'Dname',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
    DataColumn(
      label: Text(
        'Age',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ),
  ],
  rows: const [
    DataRow(
      cells: [
        DataCell(Text('1')),
        DataCell(Text('Raj')),
        DataCell(Text('34')),
      ],
    ),
    DataRow(
      cells: [
        DataCell(Text('Janine')),
        DataCell(Text('43')),
        DataCell(Text('Professor')),
      ],
    ),
    DataRow(
      cells: [
        DataCell(Text('William')),
        DataCell(Text('27')),
        DataCell(Text('Associate Professor')),
      ],
    ),
  ],
);
}

you can render a list into row like this

rows: _list.map((cita) => DataRow(
                        cells: [
                          DataCell(Text(_list.telefono ?? '',style: const 
                          TextStyle(
                              fontSize: 18,color: Colors.black
                          ))),
                          DataCell(Text(_list.nombre ?? '',style: const 
                          TextStyle(
                              fontSize: 18,color: Colors.black
                          ))),
                         DataCell(Text(_list.nombre ?? '',style: const 
                          TextStyle(
                              fontSize: 18,color: Colors.black
                          ))),
                       ]
                    )

I know my answer is far away from your asking question but this is the best approach to handle data table in flutter

user_16479524 · Answer

The problem is that the row isn't used anywhere. So instead of using this so called _buildPosts you can simply return a listView.builder. Checkout the code below:

I have added 2 sets of solutions below:

 ListView.builder(
    itemCount: posts.length,
    itemBuilder: (context, index) {
     
        return Card(
          shadowColor: Colors.white,
          color: const Color(0xFF303030),
          elevation: 1,
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  children: [
                     Container(
              child: const Text(
                'Did',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
                    Text(
                      posts[index].Did,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                     Container(
              child: const Text(
                'Dname',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
                    Text(
                      posts[index].Dname,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    Container(
              child: const Text(
                'Age',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
                    Text(
                      posts[index].Age,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      
    },
  ),

This is the most simplest approach but as per your answer there is another complex approach:

ListView.builder(
    itemCount: posts.length * 2,
    itemBuilder: (context, index) {
      if (index.isOdd) {
        return Card(
          shadowColor: Colors.white,
          color: const Color(0xFF303030),
          elevation: 1,
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text(
                  posts[index*2].Did,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                Text(
                  posts[index*2].Dname,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                Text(
                  posts[index*2].Age,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        );
      } else {
        return Row(
          //This row is not getting displayed
          children: [
            Container(
              child: const Text(
                'Did',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              child: const Text(
                'Dname',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              child: const Text(
                'Age',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        );
      }
    },
  ),

Row widget contents are not getting displayed

3 Answers