I created a Drawer with a child of a ListView like the core documentation suggests. It works. But I want to put a widget fixed at the bottom of my drawer. So I wrapped my ListView in a Column. But when I do this my Drawer contents disappear completely.
final Widget _leftDrawer = Drawer(
child: Column(
children: <Widget>[
ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Image.asset('assets/images/logo_1024.png'),
),
ListTile(
title: Text('Line 1'),
),
ListTile(
title: Text('Line 2'),
),
AboutListTile(),
],
),
],
),
);
When you put a ListView inside a Column, the ListView does not know about its boundary anymore. You need to wrap your ListView inside an Expanded widget.
final Widget _leftDrawer = Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Image.asset('assets/images/logo_1024.png'),
),
ListTile(
title: Text('Line 1'),
),
ListTile(
title: Text('Line 2'),
),
AboutListTile(),
],
),
),
],
),
);
Related
The widgets inside the child scroll view doesn't scroll and throws bottom overflow exception on the screen when there are more widgets in that list view. I am not sure where I am doing a mistake.
home: Scaffold(
body: Column(
children: [
APPbar(),
Container(
color: Colors.grey[200],
child: Expanded(
child: Column(
children: [
searchBar(),
Row(children: casewidgets),
],
)
),
)
SingleChildScrollView(
child:Column(
children: [
Text("a new column"),
Text("a new column"),
Text("a new column"),
Text("a new column"),
],
)
),
]
)),
You can use Expanded on SingleChildScollView to get aviable height, and remove column's Expanded.
home: Scaffold(
body: Column(children: [
// APPbar(),
Container(
color: Colors.grey[200],
child: Column(
children: [
// searchBar(),
Row(children: []),
],
),
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
for (int i = 0; i < 33; i++) Text("a new column"),
],
)),
),
])),
You cannot use expand when using a singlechildscrollview in appropriate way. First you need to understand that expand covers the maximum height and width on the screen or the specific section in which you use expand.
Instead of using SingleChildScrollView, It's easier to use CustomScrollView with a SliverFillRemaining. and it's works work's great.
CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: <Widget>[
const Text('TextData'),
Expanded(
child: Container(
color: Colors.green,
child: Text("Your Text Data",),
),
),
const Text('Add Other Widgets'),
],
),
),
],
),
Im new in flutter stuff can anyone help me to design layout list menu like this in flutter
ListView(
padding: const EdgeInsets.all(0), children: [
Card(
child: ListTile(
leading: Text(
'List Item 1',
),
trailing: Wrap(
spacing: 12,
children: <Widget>[
Text("Full Service"),
Icon(Icons.arrow_forward_ios_sharp,color: Colors.red,),
],
),
)
),
Card(
child: ListTile(
title:Text("List Item 2", style: mainNavigation,) ,
)
),
], shrinkWrap: true, ),
Use ListTile widget for making this UI. Try below example.
ListTile(
leading: Text(
'Tipe Akun',
),
trailing: Wrap(
spacing: 12,
children: <Widget>[
Text("Full Service"),
Icon(Icons.arrow_forward_ios_sharp,color: Colors.red,),
],
),
);
P.S :- Adjust your desire icon size
Find more articles of ListTile widget :
Various examples of ListTile
ListTile Official Document
I have a ListView.builder where I want to show containers with shadows. And I want a shadow of one container to cover another container. Example of how it should looks.
It easily to do with Stack widget, but I have no idea how to do it inside ListView.builder.
Solution that works fine for me
Instead of using ListView I've decided to use CustomScrollView that takes slivers as parameters. Inside slivers I'm maping through a list of items and return my container wrapped with SliverToBoxAdapter. I don't know exactly how it works, but it works fine for me.
CustomScrollView(
slivers: [
...names.map(
(e) => SliverToBoxAdapter(
child: Center(
child: CustomContainer(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Container #${e['name']}'),
Text('Age is ${e['age']} y.o.')
],
),
),
),
),
),
),
],
),
// if scroll view overflow on other widget then use ClipRRect With Expanded.
ClipRRect(
child: Expanded(
child: CustomScrollView(
clipBehavior: Clip.none, //add this line inside CustomScrollView
slivers: [
...names.map(
(e) => SliverToBoxAdapter(
child: Center(
child: CustomContainer(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Container #${e['name']}'),
Text('Age is ${e['age']} y.o.')
],
),
),
),
),
),
),
],
),),),
I face the same problem and i use this tricks and it's solved.
You can use index of listview and give different elevation of card according to index.
ListView.builder(
itemCount:10,
shrinkWrap: true,
itemBuilder: (ctx, i) {
return Card(
elevation: (i%2 == 1)?10 :0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment:CrossAxisAlignment.center,
mainAxisAlignment:MainAxisAlignment.center,
children: [
Text("Container $i"),
],
),
),
);
}),
I have a question, how do I make a image on top of a listview and still be able to scroll on the listview? Like scroll though the image, so the image is not moving.
When I stack them with 'stack widget' I still can't scroll, only in the parts of the scrollview that dosn't have an image on top of it.
Please help me, this is like a big part of my app that i've been developing for 6 weeks now, and if I can't make it work, my app is kinda done for it!
Here's an example:
Stack(
children: <Widget>[
ListView(
controller: scrollController,
children: <Widget>[
Container(
child: Text('widget 1'),
),
Container(
child: Text('widget 2'),
),
Container(
child: Text('widget 3'),
),
],
),
Image.asset('assets/myImage.png'),
],
),
You can wrap the image with an IgnorePointer widget:
Stack(
children: <Widget>[
ListView(
controller: scrollController,
children: <Widget>[
Container(
child: Text('widget 1'),
),
Container(
child: Text('widget 2'),
),
Container(
child: Text('widget 3'),
),
],
),
IgnorePointer(child: Image.asset('assets/myImage.png')),
],
),
I have a drawer in which I want to achieve layout posted in the below screenshot.
AllTasks, Today, Complete and Incomplete with numbers are fixed. The user cannot add these. Already added by me. CreateList and Settings as well.
MyList which is added by the user and he can add more like Food, Sports, Reading etc.
Divider as well, maybe after 1 row or 3 rows to show as groups.
Should I use ListView?. Any suggestion, please.
You have a couple of methods to do that the first one using ListView like that:
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: const Text('Test Widget'),
accountEmail: const Text('test.widget#example.com'),
margin: EdgeInsets.zero,
onDetailsPressed: () {},
),
new Expanded(
child: new ListView(
padding: const EdgeInsets.only(top: 8.0),
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: _drawerContents.map((String id) {
return new ListTile(
leading: new CircleAvatar(child: new Text(id)),
title: new Text('Drawer item $id'),
);
}).toList(),
),
// The drawer's "details" view.
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new ListTile(
leading: const Icon(Icons.add),
title: const Text('Add account'),
),
new ListTile(
leading: const Icon(Icons.settings),
title: const Text('Manage accounts'),
),
],
),
],
),
),
],
),
)
But it is efficient only with a limited number of list item because all the item of that ListView are rendered at once.
The other way to do that is using a ListView.builder like that:
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: const Text('Test Test'),
accountEmail: const Text('test#example.com'),
margin: EdgeInsets.zero,
onDetailsPressed: () {},
),
new Expanded(
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) =>
new EntryItem(data[index]),
itemCount: data.length,
),
),
],
),
),
In that way your list elements will be rendered one by one during scrolling. You should create one model for both your hardcoded elements and your variable elements and then create a different ListTile (in the example EntryItem).
Let me know if you need more details.
PS. EntryItem example below:
class EntryItem extends StatelessWidget {
const EntryItem(this.entry);
final Entry entry;
Widget _buildTiles(Entry root) {
if(root.counter != null) {
return new ListTile(
leading: Icon(root.icon),
title: Text(root.title),
trailing: new Text(root.counter)
);
} else {
return new ListTile(
leading: Icon(root.icon),
title: Text(root.title),
);
}
}
#override
Widget build(BuildContext context) {
return _buildTiles(entry);
}
}