I am new to flutter and this question may be duplicate as well. If someone can assist me finding answer my query please? Your kind kind help will be highly appreciated.
Question: How to remove or manage space in Flutter ListView Builder? Attached is the photo of Side menu / Navigation Drawer. what I require is to reduce the height of navigation items. in other words reduce the top and bottom spacing in each item.
Code as Follows:
import 'package:flutter/material.dart';
import '../pages/home_screen.dart';
import '../pages/list_page.dart';
import '../pages/item_page.dart';
final List<MenuItem> menuItems = <MenuItem>[
MenuItem(0,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
MenuItem(1,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
MenuItem(1,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
MenuItem(1,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
];
class XmobeMenu extends StatelessWidget {
int indexNumber;
XmobeMenu(int menuIndex)
{
indexNumber =menuIndex;
}
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return MenuItemWidget(menuItems[index],indexNumber);
},
itemCount: menuItems.length,
),
);
}
}
class MenuItem {
MenuItem(this.itemNumber,this.title, this.leadIcon, this.trailIcon, this.page);
final int itemNumber;
final Icon leadIcon;
final Icon trailIcon;
final String title;
final StatelessWidget page;
}
class MenuItemWidget extends StatelessWidget {
final MenuItem item;
final int indexNumber;
const MenuItemWidget(this.item, this.indexNumber);
Widget _buildMenu(MenuItem menuItem, context) {
return
new Container(
color: const Color.fromARGB(0, 245,245,245),
child: new Column(
children: <Widget>[
new Column( children: <Widget>[
Container(
padding: new EdgeInsets.all(0.0),
child: ListTile(
leading: menuItem.leadIcon,
title: Text(menuItem.title,),
trailing: menuItem.trailIcon,
selected: _checkEnabled(menuItem.itemNumber,indexNumber),
onTap: () {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) => menuItem.page,
),
);
},
),
),
Divider(height: 1.0,color: Colors.grey,),
],)
],
),
);
}
bool _checkEnabled(int itemNumber, int index)
{
if(itemNumber==index) {
return true;
}
else
{
return false;
}
}
@override
Widget build(BuildContext context) {
return _buildMenu(this.item, context);
}
}
Solution: Use visualDensity property instead within the ListTile .
To limit the height of ListView, wrap the ListView with a Container widget and set the height of the Container to the required height.
“flutter listview remove top padding” Code Answer you should wrap the ListView with a MediaQuery. removePadding widget (with removeTop: true).
you facing this issue due to auto padding in ListTile. you can use Inkwell and Row to achieve same effect. Following Code May help you.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
appBar: new AppBar(
title: new Text("check"),
),
drawer: XmobeMenu(5),
),
);
}
}
final List<MenuItem> menuItems = <MenuItem>[
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
MenuItem(0,'Home',Icons.home,Icons.chevron_right),
];
class XmobeMenu extends StatelessWidget {
int indexNumber;
XmobeMenu(int menuIndex)
{
indexNumber =menuIndex;
}
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return MenuItemWidget(menuItems[index],indexNumber);
},
itemCount: menuItems.length,
),
);
}
}
class MenuItem {
MenuItem(this.itemNumber,this.title, this.leadIcon, this.trailIcon,);
final int itemNumber;
final IconData leadIcon;
final IconData trailIcon;
final String title;
}
class MenuItemWidget extends StatelessWidget {
final MenuItem item;
final int indexNumber;
const MenuItemWidget(this.item, this.indexNumber);
Widget _buildMenu(MenuItem menuItem, context) {
return InkWell(
onTap: () {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) => MyApp(),
),
);
},
child: new Container(
color: const Color.fromARGB(0, 245,245,245),
child: new Column(
children: <Widget>[
new Column( children: <Widget>[
Container(
padding: new EdgeInsets.all(8.0), // what ever padding you want add here
child: Row(
children: <Widget>[
new Icon(menuItem.leadIcon),
new Expanded (
child: new Text(menuItem.title),
),
new Icon(menuItem.trailIcon),
],
)
),
Divider(height: 1.0,color: Colors.grey,),
],)
],
),
),
);
}
bool _checkEnabled(int itemNumber, int index)
{
if(itemNumber==index) {
return true;
}
else
{
return false;
}
}
@override
Widget build(BuildContext context) {
return _buildMenu(this.item, context);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With