I don’t know if you want the fix bar height with button as per your current code but I can help you with the design as per your shared Card Paginator Component.
For that you can use CustomScrollView with SliverAppBar.
Here is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | CustomScrollView( slivers: <Widget>[ SliverAppBar( backgroundColor: Colors.white, expandedHeight: 200, centerTitle: true, pinned: true, elevation: 0, flexibleSpace: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Expanded( child: Center( child: Container( padding: const EdgeInsets.all(10.0), child: CircleAvatar( backgroundColor: Colors.grey.shade400, child: Image.asset("assets/user.png"), maxRadius: 80, )), ), ), ], ), ), SliverToBoxAdapter( child: Padding( padding: const EdgeInsets.all(8.0), child: Center(child: Text("Aakash Kumar", style: Theme.of(context).textTheme.headline,)), ), ), SliverFixedExtentList( itemExtent: 150.0, delegate: SliverChildListDelegate( [ Container(color: Colors.red), Container(color: Colors.purple), Container(color: Colors.green), Container(color: Colors.orange), Container(color: Colors.yellow), Container(color: Colors.pink), ], ), ), ], ); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
