[英]How to remove or manage space in Flutter ListView Builder?
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?问题:如何在 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);
}
}
you facing this issue due to auto padding in ListTile .由于ListTile 中的自动填充,您面临此问题。 you can use Inkwell and Row to achieve same effect.您可以使用Inkwell和Row来达到相同的效果。 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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.