Sticky Custom TabBar Flutter - flutter

How to make sticky TabBar in this answer.
I Want category section to stick below app bar when I scroll down.
I followed this answer and want to make it sticky for better UX.
enter image description here
#override
Widget build(BuildContext context) {
return Container(
color: mainBackgroundColor,
child: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Scaffold(
backgroundColor: mainBackgroundColor,
appBar: PreferredSize(
preferredSize: Size(double.infinity, 65),
child: AppBarr(isAppBar: isAppBar, label: 'Current Affairs')),
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (context, value) {
return [
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
searchBar(),
SizedBox(height: mainpadding),
topStoriesText(),
SizedBox(height: mainpadding/2),
topStoriesCard(),
SizedBox(height: mainpadding/2),
],
)),
SliverToBoxAdapter(
child: categoryTab(),
),
];
},
body: Container(
padding: EdgeInsets.only(top: mainpadding/2),
child: TabBarView(
controller: _tabController,
children: [
Stack(
alignment: Alignment.center,
children: [
ListView.builder(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
physics: const BouncingScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.only(bottom: mainpadding),
itemCount: isLoadingData?lists.length:lists.length+1,
itemBuilder: (context, index) {
if(isLoadingData==false){
if(index==lists.length){
return Padding(
padding: EdgeInsets.only(
top: mainpadding,
left: mainpadding/2,
right: mainpadding/2,
bottom: mainpadding/2
),
child: AppButton(
text: 'Load More...',
textcolor: whiteColor,
primarycolor: blackColor,
onPressed: (() {
paginatedData();
})),
);
}
}
final users = lists[index];
return all(users);
}
),
isLoadingData?
Container(
color: Color.fromARGB(45, 0, 0, 0),
)
:SizedBox(),
isLoadingData?
Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
shape: BoxShape.rectangle,
color: whiteColor,
boxShadow: [
BoxShadow(
offset: Offset(1, 3),
blurRadius: 5,
color: Colors.black.withOpacity(0.14))
],
),
child: Center(child: CircularProgressIndicator(color: blackColor,)),
)
:SizedBox(),
],
),
_buildTabContext(2),
_buildTabContext(200),
_buildTabContext(2),
_buildTabContext(50),
_buildTabContext(50),
_buildTabContext(50),
_buildTabContext(50),
],
),
),
),
),
),
),
);
}
categoryTab(){
return TabBar(
controller: _tabController,
labelColor: blackColor,
splashBorderRadius: BorderRadius.circular(10),
physics: BouncingScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: mainpadding/2),
indicatorColor: blackColor,
labelStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600),
labelPadding: EdgeInsets.symmetric(vertical: 0,horizontal: mainpadding/1.5),
isScrollable: true,
tabs: [
Tab(text: 'All'),
Tab(text: 'General'),
Tab(text: 'International'),
Tab(text: 'Nation'),
Tab(text: 'Education'),
Tab(text: 'Economy'),
Tab(text: 'Sports'),
Tab(text: 'Tech')
]
);
}

Related

How to add a widget between SliverAppBar and Tabbar?

is there anyway to add a widget like a search bar to be between SliverAppbar and the toolbar?
so that it disppers with the two bars when scroll down?
for instance in the attached pic I want the ad, the button and the tabbar to hide with the appbar while scrolling
I can't see any widgets options in SliverAppbar except Leading, FlexiableSpace and Actions. and I guess they do not provide what I want.
any ideas?
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
leading: IconButton(
icon: const Icon(Icons.menu),
onPressed: () {},
),
title: const Text('Sample'),
pinned: false,
floating: true,
forceElevated: true,
),
];
},
body: ListView(
padding: const EdgeInsets.all(0),
children: [
banner(),
askButton(context),
search(),
tabController(),
],
),
),
);
}
Widget banner() {
return Container(
margin: const EdgeInsets.fromLTRB(12, 12, 12, 5),
height: 150,
width: double.infinity,
alignment: Alignment.center,
color: Colors.orange,
child: const Text('Banner'),
);
}
Widget askButton(context) {
return Container(
margin: EdgeInsets.fromLTRB(12, 0, MediaQuery.of(context).size.width *.7, 5),
child: ElevatedButton(
onPressed: () {},
child: const Text('+ Ask'),
),
);
}
Widget search() {
return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 5),
child: const TextField(
decoration: InputDecoration(
hintText: 'Search',
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(),
),
),
);
}
Widget tabController() {
return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 12),
child: DefaultTabController(
length: 3,
initialIndex: 0,
child: ListView(
padding: const EdgeInsets.all(0),
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
const TabBar(
labelColor: Colors.green,
unselectedLabelColor: Colors.black,
tabs: [
Tab(text: 'Questions'),
Tab(text: 'Pinned Questions'),
Tab(text: 'My Quest'),
],
),
tabView(),
],
),
),
);
}
Widget tabView() {
return Container(
height: 800,
alignment: Alignment.topCenter,
margin: const EdgeInsets.fromLTRB(12, 0, 12, 0),
decoration: const BoxDecoration(
border: Border(top: BorderSide(color: Colors.grey, width: 0.5)),
),
child: Padding(
padding: const EdgeInsets.only(top: 30),
child: TabBarView(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Questions'),
Expanded(
child: Container(),
),
const Text('End of Questions'),
],
),
const Text('Pinned Questions'),
const Text('My Quest'),
],
),
),
);
}
}
See result here.

Listview Item is overflow on Top of layout when scrolling

My listview widget is overflowed over another widget like the below screen.
Here is my full code.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:propsoft/utils/dotted_decor.dart';
import '../../utils/app_theme.dart';
import '../../widget/elevated_icon_button_widget.dart';
import '../../widget/helper_utils.dart';
import '../../widget/label_widget.dart';
import 'create_user_logic.dart';
class CreateUserPage extends GetView<CreateUserLogic> {
final logic = Get.find<CreateUserLogic>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppbar(),
body: SafeArea(child: getBodyDetails()),
);
}
Widget getBodyDetails() {
return Column(
children: [
getSearchWidget(),
DefaultTabController(
length: 2,
child: Expanded(
child: Column(
children: [getTabBar(), getTabVarView()],
),
),
),
],
);
}
Widget getTabBar() {
return TabBar(
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0, color: AppTheme.colors.black)),
labelColor: AppTheme.colors.black,
unselectedLabelColor: AppTheme.colors.gray,
indicatorSize: TabBarIndicatorSize.tab,
tabs: const [
Tab(text: "Users"),
Tab(
text: 'Status',
),
],
);
}
Widget getTabVarView() {
return Expanded(
child: TabBarView(
children: [
usersList(),
const Center(
child: Text("Status"),
),
]),
);
}
Widget usersList() {
return Column(
children: [
Expanded(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: DottedDecoration(
color: AppTheme.colors.darkBlue, shape: Shape.circle),
child: Icon(
Icons.add,
color: AppTheme.colors.darkBlue,
),
),
const SizedBox(
width: 20,
),
PLabel(
text: "Invite New Users",
enumFontWeight: PSFontWeight.bold,
textColor: AppTheme.colors.darkBlue,
)
],
),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, position) {
return InkWell(
onTap: () {},
child: Container(
margin:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Row(
children: [
PIconButton(
backgroundColor: AppTheme.colors.lightBlue,
icon: const PLabel(
fontSize: 22,
text: "HT",
),
),
const SizedBox(
width: 16,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
PLabel(text: "My Contact List"),
SizedBox(
height: 4,
),
PLabel(text: "Activated"),
],
)
],
),
),
);
},
itemCount: 10,
),
)
],
),
),
],
);
}
Widget getSearchWidget() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
controller: controller.searchController,
onChanged: (query) {
controller.filterSearchResult(query);
},
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4)),
labelText: "Search for a user",
)),
)
],
));
}
AppBar customAppbar() {
return AppBar(
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: InkWell(
onTap: () {},
child: PLabel(
text: "Save",
fontSize: 18,
textColor: AppTheme.colors.darkBlue,
)),
),
)
],
leading: IconButton(
icon: getSVGImage("assets/images/cross.svg"),
onPressed: () {
Get.back();
},
),
leadingWidth: 40,
title: const PLabel(
text: "Users & Group",
fontSize: 22,
),
backgroundColor: AppTheme.colors.white,
elevation: 0);
}
}
I have worked on your code....its work fine only...
Things changed... instead of PLabel Widget I have used Text Widget and Instead of PIconButton Widget I have used normal Icon Widget.... take my code as reference only...because I have changed your icons because of not having getSVGImage package and some other package.. And attaching image for your reference
Working example:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppbar(),
body: SafeArea(child: getBodyDetails()),
);
}
Widget getBodyDetails() {
return Column(
children: [
getSearchWidget(),
DefaultTabController(
length: 2,
child: Expanded(
child: Column(
children: [getTabBar(), getTabVarView()],
),
),
),
],
);
}
Widget getTabBar() {
return const TabBar(
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0, color: Colors.black)),
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorSize: TabBarIndicatorSize.tab,
tabs: [
Tab(text: "Users"),
Tab(
text: 'Status',
),
],
);
}
Widget getTabVarView() {
return Expanded(
child: TabBarView(
children: [
usersList(),
const Center(
child: Text("Status"),
),
]),
);
}
Widget usersList() {
return Column(
children: [
Expanded(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blueAccent, shape: BoxShape.circle),
child: Icon(
Icons.add,
color: Colors.black12,
),
),
const SizedBox(
width: 20,
),
Text(
"Invite New Users",
)
],
),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, position) {
return InkWell(
onTap: () {},
child: Container(
margin:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
child: Row(
children: [
IconButton(
color: Colors.lightBlue,
icon : const Icon(
Icons.home,
),
onPressed: () { },
),
const SizedBox(
width: 16,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("My Contact List"),
SizedBox(
height: 4,
),
Text("Activated"),
],
)
],
),
),
);
},
itemCount: 10,
),
)
],
),
),
],
);
}
Widget getSearchWidget() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
// controller: controller.searchController,
// onChanged: (query) {
// controller.filterSearchResult(query);
// },
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4)),
labelText: "Search for a user",
)),
)
],
));
}
AppBar customAppbar() {
return AppBar(
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: InkWell(
onTap: () {},
child: Text(
"Save",
)),
),
)
],
leading: IconButton(
icon: Icon(Icons.book),
onPressed: () {
// Get.back();
},
),
leadingWidth: 40,
title: const Text(
"Users & Group",
),
backgroundColor: Colors.white,
elevation: 0);
}

how to create a container without giving it a height in Flutter

have tried to wrapp the tabbarview with expanded but its not working.
I do not want to give the height as the items displayed there can be many.
I want the height to increase the number of items available to be scrolled.
The issue at hand is i do not want to add any height to that container.
Any help
this here is the code in the body where i have my tabbar
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Let the party begin!",
style: titleStyle1.copyWith(fontSize: 28.0),
),
]),
),
SizedBox(height: 30.0),
InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SlideInRight(
duration: Duration(seconds: 2),
child: Search(),
),
),
);
},
child: Container(
margin: EdgeInsets.only(
right: 20.0, left: 20.0, bottom: 20.0),
height: 45.0,
width: double.infinity,
decoration: BoxDecoration(
color: background,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 5.0,
spreadRadius: 0.0)
]),
child: Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
child: Row(
children: <Widget>[
Text(
'Search...',
style: TextStyle(fontSize: 20, color: grey),
textAlign: TextAlign.left,
),
],
),
),
),
),
TabBar(
controller: _tabController,
physics: ClampingScrollPhysics(),
indicatorColor: authlink,
labelColor: authlink,
unselectedLabelColor: grey,
isScrollable: true,
labelStyle: TextStyle(fontSize: 18.0),
labelPadding: EdgeInsets.symmetric(horizontal: 25),
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(text: "All"),
Tab(text: "Trending"),
Tab(text: "Live"),
Tab(text: "Happening Today"),
]),
Container(
//without this height i get this problem
// height: 580.0,
child: new TabBarView(
controller: _tabController,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 25.0),
child: Column(
children: <Widget>[
Container(
child: buildAllComingEventList(),
),
Container(
child: buildNearbyEventList(),
),
Container(
child: moreConcerts(),
),
],
),
),
Container(
child: trendingConcerts(),
),
Container(
height: MediaQuery.of(context).size.height,
child: getStories(),
),
Container(
child: happeningTodayConcerts(),
),
],
),
),
],
),
),```
What if you change other way to layout your page:
Scaffold(
appBar: AppBar(
actions: //your button
flexibleSpace: //your search bar
bottom: //your tab bar
),
body: // your tab view
),

i need an horizontal and an vertical listView builder in the same page. horizontal at the top and vertical listview at the bottom

This is my code. i need an vertical listview at the top and an horizontal listview at the bottom. top listview shouldn't move with the bottom horizontal listview. My app freezes when i go to this page. i need to stop the main.dart and restart the app.i need a screen something like this. what should i do
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_ecommerce_app/common_widget/BottomNavBarWidget.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
class ExpanPrdCat extends StatefulWidget {
#override
_ExpanPrdCatState createState() => _ExpanPrdCatState();
}
class _ExpanPrdCatState extends State<ExpanPrdCat> {
bool isLoading = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
title: Text('Vegetables'),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios_rounded),
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
color: Color(0xFF323232),
),
],
),
// bottomNavigationBar: BottomNavBarWidget(),
body: Container(
child: Column(children: [
Container(
height: 90,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
)),
),
),
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
]),
),
);
}
//==================================================
categoryItemsTabs(int index) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 3),
height: 40,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/broccoli-in-a-pile-royalty-free-image-593310638-1564523257.jpg"),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken)),
borderRadius: BorderRadius.circular(15)),
),
Container(
alignment: Alignment.center,
child: Text(
"Organic",
style: TextStyle(
color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
],
);
}
cartItems(int index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://economictimes.indiatimes.com/thumb/height-450,width-600,imgsize-111140,msid-72862126/potato-getty.jpg?from=mdr"),
fit: BoxFit.cover)),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 15),
child: Row(
children: [
Container(
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"potato",
style: TextStyle(
fontSize: 25,
),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
"malayalam name",
style: TextStyle(fontSize: 20),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Column(
children: [
Text("price"),
],
)
],
),
),
],
),
),
Row(
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(05)),
height: 20,
child: DropdownButton<String>(
icon: Icon(Icons.keyboard_arrow_down),
underline: SizedBox(),
hint: Text("choose"),
items: ['1 Kg', '2Kg'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
SizedBox(
height: 50,
),
Row(
children: [
Container(
height: 20,
width: 70,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen()),
);
},
child: Text(
" Add",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w800),
),
),
)
],
)
],
),
],
)
],
),
),
),
)
],
);
}
}
Just add physics: ClampingScrollPhysics(), in your ListView.builder properties.
Example:
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
You can do it using SingleChildScrollView :
for horizontal scrolling
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [],
),
),
for vertical scrolling
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [],
),
),
return Scaffold(
appBar: AppBar(....),
body: Container(
child: Column(children: [
Container(
height: 90,
width: MediaQuery.of(context).size.width,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
),
),
),
),
Expanded(
child: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
),
)
]),
),
);

Flutter- Gridview inside listview issue

I want to show Carousel slider and listview inside gridview and want to scroll complete page, I am able to scroll parent listview but when I go down can't able to scroll.
Code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image:
AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
),
);
}
The best thing to use for your case is Slivers, it will allow you to scroll through both the ListView and GridView together smoothly.
An example is as follows:
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Text('hello'),
),
);
},
);
}).toList(),
),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 20.0),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
}, childCount: 5),
)
],
),
);
}
}
Add physics: PageScrollPhysics(), for both ListView.builder() & GridView.count()
Code:
ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image: AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
physics: PageScrollPhysics(),
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
physics: PageScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
);