So i want to show posts and for that am using listview.builder in the body of nestedscrollview but when i scroll down then appbar doesn't get hided. This is in case of listview.builder only if i assign controller to it. If i don't then it works perfectly.
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
pinned: false,
floating: true,
snap: true,
forceElevated: innerBoxIsScrolled,
backgroundColor: Themes.secondaryColor,
automaticallyImplyLeading: false,
elevation: 0.0,
titleSpacing: 0,
toolbarHeight: 90,
title: Padding(
padding: const EdgeInsets.only(left:8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Trending",
style: GoogleFonts.roboto(
textStyle: const TextStyle(
fontSize: 20,
color: Color(0xff000000),
fontWeight: FontWeight.w500,
),
),
textAlign: TextAlign.left,
),
const SizedBox(height: 10,),
SizedBox(
width: double.infinity,
height: 27,
child: ListView.separated(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemCount: categories.length,
separatorBuilder: (context,index)=>const SizedBox(width: 5,),
itemBuilder: (context,index){
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: selectedIndex==index?Themes.primaryColor:Themes.primaryColor.withOpacity(0.5),
),
padding: const EdgeInsets.symmetric(vertical:5,horizontal: 12),
child: Text(
categories[index],
style: const TextStyle(color: Colors.white,fontSize: 13),
),
);
},
),
),
],
),
),
),
];
},
body: loading?const Center(child: CircularProgressIndicator(),
):ListView.separated(
controller: scrollController,
padding: const EdgeInsets.symmetric(vertical:15),
itemCount: posts.length,
separatorBuilder: (context,index)=>const SizedBox(height: 6,),
itemBuilder: (context,index)=>posts[index],
),
),
),
);
If you only need the controller to do something like pagination or listen to scroll event use NotificationListener it will allow you to do that.
Related
I am trying to recreate the main page of Spotify. At first I wasn't able to make my navigation bar transparent then I learned that I should use extendBody: true property. It worked and I got a transparent navigation bar but now it seems like it changed the space between the items on the screen and I am clueless at this point. This is the part where I added extendBody property:
#override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
appBar: AppBar(
backgroundColor: Color(0xFF212121),
title: Text("Spotify", style: TextStyle(fontFamily: 'Work Sans', fontWeight: FontWeight.bold)),
elevation: 0,
actions: [
IconButton(onPressed: (){}, icon: Icon(Icons.notifications_outlined)),
IconButton(onPressed: (){}, icon: Icon(Icons.history)),
IconButton(onPressed: (){}, icon: Icon(Icons.settings)),
],
),
And this is the part that forms gridlist and the problematic part:
FutureBuilder<List<GridListe>>(
future: gridListeyiGetir(),
builder: (context, snapshot){
if(snapshot.hasData){
var gridListe = snapshot.data;
return Padding(
padding: const EdgeInsets.only(top: 15),
child: GridView.builder(
shrinkWrap: true,
itemCount: gridListe!.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 3/1),
itemBuilder: (context, index){
var list = gridListe[index];
return Card(
semanticContainer: true,
color: Color(0xFF535353),
child: Row(
children: [
Image.asset("resimler/${list.listeResmi}", fit: BoxFit.fitHeight),
Padding(
padding: const EdgeInsets.only(left: 5),
child: Text(list.listeAdi, style:TextStyle(color: Colors.white,fontFamily: 'Work Sans' ,fontWeight: FontWeight.bold) , ),
),
],
),
);
}
),
);
}else{
return const Center();
}
},
),
Padding(
padding: const EdgeInsets.only(right: 280),
child: const Text("Made For You", style: TextStyle(color: Colors.white, fontFamily: 'Work Sans',fontWeight: FontWeight.bold, fontSize: 15)),
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: SizedBox(
height: 180,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 160,
child: Card(
elevation: 0,
color: Color(0xFF212121),
child:
Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("resimler/dailymix1.jpg"),
Text("Daily Mix 1", style: TextStyle(color: Colors.white, fontFamily: "Work Sans", fontWeight: FontWeight.bold), ),
],
),
),
),
As can be seen in the images the grid list and "Made For You" text should be somewhat close to eachother however its not the case.
when extendBody:false
when extendBody:true
This is my code
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
floating: true,
expandedHeight: 200.0,
title: AppAbar(),
flexibleSpace: FlexibleSpaceBar(
background: FlexibleAppBar(),
),
leading: Icon(Icons.menu, color: Colors.white, size: 30.0,),
),
SliverList(
delegate: SliverChildListDelegate(
List.generate(6, (idx) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
elevation: 3,
margin: EdgeInsets.symmetric(horizontal: 15),
child: Consumer<TimeSheetRepository>(
builder: (BuildContext context, TimeSheetRepository db, Widget child) {
_queryWeekYear = db.queryByMonthYear(
12, 2020);
return StreamBuilder(
stream: _queryWeekYear,
builder: (context, snapshot){
if(!snapshot.hasData || snapshot.data.documents == null) return CircularProgressIndicator();
return ListTile(
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('${_numWeeks[idx]}'),
],
),
title: Container(
height: MediaQuery.of(context).size.height/16,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 7,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
Text('${(DateFormat('EEEE').format(firstweek[index]).substring(0, 1))}',style: TextStyle(fontSize: 12.0, color: Colors.black54)),
],
),
SizedBox(width: 28.0),
],
),
]
),
);
}
),
),
subtitle: Container(
height: MediaQuery.of(context).size.height/20,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot docSnapshot = snapshot.data.documents[index];
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
Text('${docSnapshot['date'].toString()}',style: TextStyle(fontSize: 12.0, color: Colors.black54)),
**// HERE I'M TRYING TO PUT THE DATE (IF EXISTS IN MY QUERY) BUT I NEED PUT IT IN THE CORRECT DAY IN MY CARD**
],
),
SizedBox(width: 28.0),
],
),
]
);
}
)
),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColorLight.withOpacity(0.2),
borderRadius: BorderRadius.circular(5.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text( "148", style: TextStyle(color: Colors.blue.shade800, fontWeight: FontWeight.w500, fontSize: 18.0),
),
),
),
],
),
);
}
);
}
),
),
);
})
),
),
],
),
);
I built a card, inside I have a listview.buider making a days of the weeks, and I have my Stream with QuerySnapshot with some days. I'm trying to put in my widget day, the same day that I have in my QuerySnapshot.
How can I get a specify date from my query?
I did some changes, but doesn't works.
I need to find inside my QuerySnapshot if X day is there, if not continue next
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),
],
);
},
),
],
),
],
);
I have a ListView that is seperated by a divider and is called as shown below.
I have called all the elements however the last tile gets cut on my screen. I've tried adding the SliverPadding around the List but it doesn't help and crops the list even more.
This is the code for my ListView:
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 80.0),
child: CustomScrollView(slivers: <Widget>[
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.09,
bottom: MediaQuery.of(context).size.height * 0.015,
left: 18.0),
child: Text("Puppies",
style: khomeStyle.copyWith(color: kOrange, fontSize: 27)),
),
),
SliverFillRemaining(
child: ListView.separated(
itemCount: 10,
//shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
//padding: EdgeInsets.all(0),
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
isThreeLine: false,
leading: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
child: Image.network(
'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
),
),
title: Row(
children: <Widget>[
Text(
"Helllo",
style: khomeStyle.copyWith(
fontSize: 17,
color: kOrange,
fontWeight: FontWeight.w600),
),
],
),
subtitle: Text(
'This is a message',
style: khomeStyle.copyWith(
fontSize: 15,
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.w300),
));
}),
),
]),
),
],
),
);
}
This is what the ListView looks like:
https://i.stack.imgur.com/vyL2x.png
If you are not looking for Slivers, try below code. this will scroll till last item and nothing will be cropped.
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 80.0),
child: SingleChildScrollView(
child: ListView.separated(
itemCount: 10,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
isThreeLine: false,
leading: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
child: Image.network(
'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
),
),
title: Row(
children: <Widget>[
Text(
"Helllo",
style: khomeStyle.copyWith(
fontSize: 17,
color: kOrange,
fontWeight: FontWeight.w600),
),
],
),
subtitle: Text(
'This is a message',
style: khomeStyle.copyWith(
fontSize: 15,
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.w300),
));
}),
),
),
);
}
I am quite new to flutter, but I want to create an app in which my main vertical list could be dragged from bottom part of the screen to above part and when I do that my horizontal listview(as shown in image) will fade away, for this I thought of using SliverAppBar, but I don't know how to add Horizontal ListView to it.
I want to achieve UI something like this.
For starter, try this if you want a SliverAppBar approach but I recommend using a two List instead. One horizontal and one vertical
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 300,
centerTitle: true,
pinned: true,
elevation: 4,
floating: true,
title: Text(
'Subscribe Now',
style: TextStyle(color: Colors.white),
),
flexibleSpace: FlexibleSpaceBar(
titlePadding: const EdgeInsets.all(0),
collapseMode: CollapseMode.pin,
background: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.indigoAccent,
margin: EdgeInsets.only(left: 20, bottom: 16, top: 180),
child: SizedBox(
height: 100,
width: 100,
child: Center(
child: Text('Item No. $index'),
),
),
);
}),
),
),
SliverList(
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black,
),
padding: const EdgeInsets.all(22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Get 7 days free',
style: Theme.of(context)
.textTheme
.headline
.copyWith(color: Colors.white),
),
const SizedBox(
height: 2,
),
Text(
'Save 50% off',
style: Theme.of(context)
.textTheme
.button
.copyWith(color: Colors.greenAccent),
),
const SizedBox(
height: 6,
),
Text(
'\$60',
style: Theme.of(context).textTheme.headline.copyWith(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 28),
)
],
),
);
}, childCount: 10),
)
],
),
);