Using AppBar in ListviewBuilder-CodePudding

I could not find the way to use using AppBar in ListviewBuilder. Here is code (this code is does not works properly getting only white screen)

@override
  Widget build(BuildContext context) {
    return FutureBuilder<Categories>(
      future: _futureCategories,
      builder: (BuildContext context, AsyncSnapshot<Categories> snapshot) {
        if (snapshot.hasData) {
          final name = snapshot.data?.data;
          return DefaultTabController(
            length: 2,
            child: Scaffold(
              body: ListView.builder(
                itemCount: name?.length,
                itemBuilder: (BuildContext context, int index) {
                  return AppBar(
                    title: const Text('Hello'),
                    bottom: TabBar(
                      tabs: [
                        Text(' ${name?[index].name}'.toUpperCase()),
                        Text(' ${name?[index].name}'.toUpperCase()),
                      ],
                      isScrollable: true,
                      labelColor: Colors.black,
                    ),
                  );
                },
              ),
            ),
          );
        } else if (snapshot.hasError) {
          return NewsError(
            errorMessage: '${snapshot.hasError}',
          );
        }

Why I have to use AppBar in Listview? because I have to use index value for TabBarController.

any idea to do this?

CodePudding user response：

Base on your code, what you're trying to achieve is not a good user experience and interface. (having a Listview with multiple appbar). And it's better to wrap your ListView with the FutureBuilder Can you provide a screenshot of the solution you desire ?

CodePudding user response：

The reason you are getting white screen because of loading state

use FutureBuilder like

 FutureBuilder(
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting)
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  else if (snapshot.hasData) return DefaultTabController...Your data Widget....;

                  return Text(snapshot.error.toString());
                },
              ),

you can find appBar on Scaffold But if you still wish to have appBar on ListView.builder try

  itemCount: name?.length 1,
 itemBuilder: (context, index) {
         return index == 0 ? AppBar() : Text("Index $index");
        },

I Will suggest to return Scaffold from build method instead of FutureBuilder if you dont have any reason. and use appbar there.