So, I am creating a sliver based AppBar based on this example I found, and am facing the error named parameter 'slivers' isn't defined.
My code somewhat looks like this (I know I am probably putting the sliver in the wrong place, but any help in understanding the issue is appreciated).
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
CommunityMaterialIcons.plus,
color: Colors.black,
),
),
slivers: <Widget>[ // *problematic sliver here*
SliverAppBar(
pinned: true,
expandedHeight: 256.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('po.'),
),
),
],
body: ListView.builder(
itemCount: tracks.length,
itemBuilder: (BuildContext context, int index) { // the rest of the itembuilder continued here
Indeed slivers field is not defined for Scaffold. Wrap your appbar and listview in NestedScrollView like this:
Widget build(BuildContext context) => Scaffold(
backgroundColor: Colors.white,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.plus_one,
color: Colors.black,
),
),
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 256.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('po.'),
),
),
];
},
body: ListView.builder(
padding: EdgeInsets.all(8.0),
itemExtent: 20.0,
itemBuilder: (BuildContext context, int index) {
return Text('entry $index');
},
)));
Here is fixed gist you provided:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Home(),
));
}
class Home extends StatelessWidget {
final tracks = const [
{'title': 'BCS Examination', 'subtitle': 'Something'},
{'title': 'Dhaka University Admission'},
{'title': 'Khulna University Admission'},
{'title': 'Chottogram University Admission'},
{'title': 'Bank Job Exam'},
{'title': 'Bank Job Exam'}
];
#override
Widget build(BuildContext context) => Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.info,
color: Colors.black,
),
),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 256.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('po.'),
),
),
];
},
body: ListView.builder(
itemCount: tracks.length,
itemBuilder: (BuildContext context, int index) {
var trackTitles = tracks[index];
return Text(trackTitles['title']);
}),
));
}
In the body you cold set a SliverList and set the child count as 0.
Something like:
SliverList(
delegate: new SliverChildListDelegate(<Widget>[]),
)
Normally I use it with a CustomScrollView but you could try.
Related
I am newbie and I am still trying to get Widgets and wrapping concept. For me it is probably hardest part of to learn Flutter.
I have Sliver AppBar and I have to get fetch some data and using FutureBuilder. Here is code
#override
Widget build(BuildContext context) => Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
backgroundColor: Colors.red,
expandedHeight: 200,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
'https://source.unsplash.com/random?monochromatic+dark',
fit: BoxFit.cover,
),
title: Text('Flexible Title'),
centerTitle: true,
),
//title: Text('My App Bar'),
leading: Icon(Icons.arrow_back),
actions: [
Icon(Icons.settings),
SizedBox(width: 12),
],
),
],
),
);
}
so my problem is how can I integrate my FutureBuilder snippet to this code.
Here is FutureBuilder:
FutureBuilder<Article>(
future: _futureArticle,
builder: (BuildContext context, AsyncSnapshot<Article> snapshot) {
if (snapshot.hasData) {
final article = snapshot.data?.data;
any help
The correct wrapping:
Widget build(BuildContext context) => Scaffold(
body: FutureBuilder<Article>(
future: _futureArticle,
builder: (BuildContext context, AsyncSnapshot<Article> snapshot) {
if (snapshot.hasData) {
final article = snapshot.data?.data;
return CustomScrollView(
slivers: [
SliverAppBar(
// backgroundColor: Colors.red,
expandedHeight: 200,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(article == null
? 'https://www.tonymacx86.com/attachments/2019-02-05-07-50-43-jpeg.385401/'
: article.imageUrl!),
title: Text('${article!.title}'),
centerTitle: true,
),
leading: const Icon(Icons.arrow_back),
actions: const [
Icon(Icons.settings),
SizedBox(width: 12),
],
),
],
);
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
);
}
I am using a SliverAppBar and SliverList inside a CustomScrollView. Now I want to build a another ListView inside the SliverList I have. But it doesn't let me.
You will need a NestedScrollView
Here's an example:-
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: SliverAppBar(),
body: new NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
new SliverAppBar(
pinned: true,
title: new Text('Flutter Demo'),
),
];
},
body: new Column(
children: <Widget>[
new FlutterLogo(size: 100.0, colors: Colors.purple),
new Container(
height: 300.0,
child: new ListView.builder(
itemCount: 60,
itemBuilder: (BuildContext context, int index) {
return new Text('Item $index');
},
),
),
new FlutterLogo(size: 100.0, colors: Colors.orange),
],
),
),
);
}
}
I wrote a NestedScrollView interface in the example of the Flutter document, but when I look at the ListView as the body, I find that there is a weird gap between the ListView and the SliverAppBar. What can I do to delete this gap
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, boxIsScrolled) {
return [
SliverAppBar(
pinned: true,
expandedHeight: 100,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Container(
color: Colors.red,
),
),
),
];
},
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
child: Text(
"$index",
),
color: Colors.green,
);
},
),
),
);
}
}
You can wrap your Listview with the MediaQuery. There is one method for remove unwanted space. You can check below code.
MediaQuery.removePadding(
removeTop: true,
context: context,
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
child: Text(
"$index",
),
color: Colors.green,
);
},
),
)
The glow acts like the entire screen is a list. There some way that I can put the glow below the appbar? (edit: without losing the floating effect of the appbar)
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Home Scree'),
floating: true,
leading: Icon(Icons.alarm),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(ctx, i) {
return Column(
children: <Widget>[
ProductCard(),
Divider(
height: 0,
thickness: 1,
),
],
);
},
childCount: 10,
),
),
],
),
Maybe you can try to use NestedScrollView,like this:
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [SliverAppBar(
leading: Icon(Icons.alarm),
title: Text('Home Scree'),
expandedHeight: kToolbarHeight,
floating: true,
)];
},
body: ListView.builder(
padding: EdgeInsets.zero,
itemCount: 10,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
ProductCard(),
Divider(
height: 0,
thickness: 1,
),
],
);
}),
),
);
}
How add build collapsing app bar with pinned tabBar in Flutter like in this GIF
I managed to build it like so
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
floating: true,
pinned: true,
title: Text('Test'),
bottom: TabBar(
tabs: [
Tab( text: "Call"),
Tab( text: "Message"),
],
),
),
];
},
body: TabBarView(
children: [
Container(child: ListView.builder(
itemCount: 100,
itemBuilder: (context,index){
return Text("Item $index");
})),
Container(child: ListView.builder(
itemCount: 100,
itemBuilder: (context,index){
return Text("Item $index");
})),
],
),
),
),
);
}
}
You can use the SilverAppBar
SliverAppBar(
expandedHeight: 150.0,
floating:true,
pinned: true,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () { /* ... */ },
),
]
)
References
SliverAppBar Class
SliverAppBar Widget of the week
Keep the TabBarView seperate from the SliverAppBar.
Make it look continuous by setting SliverAppBar's elevation to 0 and use shadow or elevation for the TabBarView, whatever you prefer.