CODEWITHSUNDEEP
flutterlistviewdartscroll
nicover
nicover

Reputation: 2643

Vertical ListView inside ScrollView flutter

My UI use case is similar to an Instagram user profile.

I have multiple widget on top and an infinite ListView.builder bellow with item. I would like to scroll everything like within a ScrollView but the scrollview can not contain an infinite list.

How can I handle this situation in Flutter ?

Upvotes: 2

Views: 771

Answers (1)

Aman Verma
Aman Verma

Reputation: 918

Using CustomScrollView is the Solution

Here i have done Basic Implementation for you :

class MainBody extends StatefulWidget {
  MainBody({Key key}) : super(key: key);

  @override
  _MainBodyState createState() => _MainBodyState();
}

class _MainBodyState extends State<MainBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              height: 100,
                              width: 100,
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle, color: Colors.green),
                              child: Center(child: Text("ProfileImage")),
                            ),
                            flex: 1,
                          ),
                          Expanded(flex: 2, child: Text("Profile Statistics"))
                        ],
                      ),
                      Text("Bio"),
                      Text("Some Buttons"),
                      Text("Story Highlights"),
                    ])),
          ),
          SliverToBoxAdapter(
            child: Container(
                height: 150,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    itemBuilder: (context, index) {
                      return Container(
                        margin: const EdgeInsets.all(10),
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Colors.red),
                        child: Center(child: Text((index + 1).toString())),
                      );
                    })),
          ),
          SliverAppBar(
            centerTitle: false,
            pinned: true,
            flexibleSpace: DefaultTabController(
              initialIndex: 0,
              length: 2,
              child: TabBar(tabs: [
                Center(child: Text("Icon1")),
                Center(child: Text("Icon2")),
              ]),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(8),
            sliver: SliverList(
                delegate: SliverChildBuilderDelegate(
                    (context, index) => Container(
                        height: 30,
                        child: Center(child: Text("Hey" + index.toString()))),
                    childCount: 20)),
          )
        ],
      ),
    );
  }
}

Futher Enhancements can be done

Upvotes: 2

Related Questions