How to make dynamic listview in tabbar

Question

I want to make here Listing of cicrleavater, and in that cicleavter size issue width not getting more than 20 ! i want to make listing like instagram stories...and each tap i want show same pages but data differnt and current circle avater border need to show yello color....! how to do that i show you my screen size issue top whre cicleavter size issue i want make dyanamic listview and show on border when i tapped on it it

    class FolderPageTabBAr extends StatefulWidget {
    @override
   _FolderPageTabBArState createState() => _FolderPageTabBArState();
    }

  class _FolderPageTabBArState extends State<FolderPageTabBAr> {

  List<Widget> pages = [
 CampaignFolder(),
 ShelfScreen(),
 CampaignFolder(),
 ShelfScreen(),

];

double Redius = 40.0;

@override
Widget build(BuildContext context) {
return DefaultTabController(
  length: pages.length,
  initialIndex: 0,
  child: Scaffold(
    body: Stack(
      children: <Widget>[
        TabBarView(
          children: pages,
        ),
        Container(
            margin: EdgeInsets.only(top: 110,left: 1),
            child: SizedBox(
              height: 80,
              width: 500,
              child: TabBar(
                tabs: [
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        backgroundImage: NetworkImage(Globals.PhotographerProf),
                        radius: 22,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child:Text(
                          'ALL',
                          overflow: TextOverflow.ellipsis,
                          style: new TextStyle(
                            fontSize: 12.0,
                            fontFamily: 'Roboto',
                            color: new Color(0xFF212121),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      )
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        radius: 22,
                        backgroundImage: NetworkImage(Globals.PhotographerProf),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          Globals.Buisnessname,
                          overflow: TextOverflow.ellipsis,
                          style: new TextStyle(
                            fontSize: 11.0,
                            fontFamily: 'Roboto',
                            color: new Color(0xFF212121),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      )
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        backgroundImage: NetworkImage(Globals.PhotographerProf),
                        radius: 22,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "Family",
                          overflow: TextOverflow.ellipsis,
                          style: new TextStyle(
                            fontSize: 10.0,
                            fontFamily: 'Roboto',
                            color: new Color(0xFF212121),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      )
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        backgroundImage: NetworkImage(Globals.PhotographerProf),
                        radius: 22,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child:Text(
                          "Album",
                          overflow: TextOverflow.ellipsis,
                          style: new TextStyle(
                            fontSize: 9.0,
                            fontFamily: 'Roboto',
                            color: new Color(0xFF212121),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      )
                    ],
                  ),
                ],
                unselectedLabelColor: Colors.orange,
                labelColor: Colors.deepOrange,
                indicatorColor: Colors.transparent,
              ),
            )
          ),
      ],
    ),
  ),
  );
  }
  }

Answer 1

To create multiple (dynamic) views that look similar use List View Builder FULL Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyClass {
  final String url;
  final int id;

  MyClass(this.url, this.id);
}

class Foo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FooState();
}

class FooState extends State<Foo> {
  int selectedIndex = 0;
  List<MyClass> items = [
    MyClass('https://picsum.photos/250?image=9', 1),
    MyClass('https://picsum.photos/250?image=10', 5),
    MyClass('https://picsum.photos/250?image=11', 33)
  ];
  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 90,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: items.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedIndex = index;
                    });
                  },
                  child: getAvatarView(items[index], index == selectedIndex),
                );
              },
            ),
          ),
          Text(
            "here is my page for id ${items[selectedIndex].id}",
            style: TextStyle(backgroundColor: Colors.black, color: Colors.red),
          ),
        ],
      ),
    );
  }

  Widget getAvatarView(MyClass item, bool isSelected) {
    return Container(
      margin: isSelected ? const EdgeInsets.all(5.0) : null,
      decoration: BoxDecoration(
          border: isSelected ? Border.all(color: Colors.yellow) : null),
      child: Column(
        children: <Widget>[
          CircleAvatar(
            backgroundImage: NetworkImage(item.url),
            radius: 22,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              'ALL',
              overflow: TextOverflow.ellipsis,
              style: new TextStyle(
                fontSize: 12.0,
                fontFamily: 'Roboto',
                color: new Color(0xFF212121),
                fontWeight: FontWeight.bold,
              ),
            ),
          )
        ],
      ),
    );
  }
}

To pass multiple attributes in an item (callback function, url for img,...) use a List of Custom classes.