I need list view builder to generate tiles based on the number of documents there will be in firebase for now I am just trying to sort the UI. I dont understand why its breaking. Image 1 is when the ListView.buidler is commented out. Image 2 is leaving ListView in.

List item

import 'package:flutter/material.dart';
import 'package:track/src/widgets/admin_navbar.dart' as widgets;
import 'package:track/src/widgets/colour_icon_button.dart' as widgets;

import 'package:track/src/features/clients/domain/client_firebase_storage.dart';


class ClientsPage extends StatefulWidget {
  const ClientsPage({Key? key}) : super(key: key);

  @override
  State<ClientsPage> createState() => _ClientsPageState();
}

class _ClientsPageState extends State<ClientsPage> {
  late final ClientFirebaseStorage _clientsService;
  late double screenWidth;
  late double screenHeight;
  @override
  void initState() {
    _clientsService = ClientFirebaseStorage();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: const FlutterLogo(),
      ),
      drawer: const widgets.AdminNavBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                'Clients',
                style: Theme.of(context).textTheme.headline1,
              ),
              const SizedBox(
                width: 30,
              ),
              const widgets.ColourIconButton(icon: Icon(Icons.search_rounded)),
              const SizedBox(
                width: 5,
              ),
              const widgets.ColourIconButton(
                icon: Icon(Icons.swap_vert_rounded),
              ),
              SizedBox(
                width: screenWidth - 350,
              ),
              const widgets.ColourIconButton(
                icon: Icon(Icons.add),
              ),
            ],
          ),
          SizedBox(
            height: 190,
          ),
          Text('Test1'),
          Text('Test2'),
          Text('Test3'),
          ListView.builder(
            itemBuilder: (context, index) {
              return ListTile(
                onTap: () {},
                title: Text('#'),
              );
            },
          )
          // StreamBuilder(
          //   stream: _clientsService.allClients(),
          //   builder: (context, snapshot) {
          //     switch (snapshot.connectionState) {
          //       case ConnectionState.waiting:
          //       case ConnectionState.active: //implicit fall through
          //         if (snapshot.hasData) {
          //           final allClients = snapshot.data as Iterable<Client>;
          //           return ClientsListView(
          //             clients: allClients,
          //             onTap: (clients) {},
          //           );
          //         } else {
          //           return const CircularProgressIndicator();
          //         }
          //       default:
          //         return const CircularProgressIndicator();
          //     }
          //   },
          // ),
        ],
      ),
    );
  }
}

Before adding List.viewbuilder After adding list.viewbuilder

CodePudding user response：

for the first picture (before adding Listview.builder) items are rendered in center because you have a Row inside your Column, Column & Row have a default CrossAxisAlignment.center

After adding the ListView.builder, the log will be showing you an error, ListView here needs to be either inside an Expanded or shrinkWrap: true, Setting an Expanded as a parent for the ListView will make the listview scrollable only, but adding the attribute shrinkWrap: true will stop the scrolling feature in your Listview, and then you will have to put your Column inside a Listview or SingleChildScrollView