Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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? 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);
  }


}
like image 444
SDevjani Avatar asked Sep 21 '18 10:09

SDevjani


People also ask

How do you reduce space between lists in Flutter?

Solution: Use visualDensity property instead within the ListTile .

How do I limit the size of a ListView Flutter?

To limit the height of ListView, wrap the ListView with a Container widget and set the height of the Container to the required height.

How do you get rid of the top space in Flutter?

“flutter listview remove top padding” Code Answer you should wrap the ListView with a MediaQuery. removePadding widget (with removeTop: true).


1 Answers

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);
    }


  }
like image 70
Viren V Varasadiya Avatar answered Oct 16 '22 21:10

Viren V Varasadiya