Hello I am new in flutter development, Here I'm getting Bottom overflowed by 98 pixel error. How to solve this. means bottom of app bar is overflowed when I added more list title. It must be scrollable. Please help me to solve this.

app_drawer.dart:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../screens/orders_screen.dart';
import '../screens/user_products_screen.dart';
import '../providers/auth.dart';

class AppDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          AppBar(
            title: Text('MyApp'),
            automaticallyImplyLeading: false,
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.shop),
            title: Text('Home'),
            onTap: () {
              Navigator.of(context).pushReplacementNamed('/');
            },
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Control Process'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.edit),
            title: Text('Process Sheet'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(UserProductsScreen.routeName);
            },
          ),
           Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Skill Matrix'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
           Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Maintenance'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
           Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Sws'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
           Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Safety'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
           Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Pfd'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Gauges'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.payment),
            title: Text('Videos'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.exit_to_app),
            title: Text('Logout'),
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).pushReplacementNamed('/');
              
              // Navigator.of(context)
              //     .pushReplacementNamed(UserProductsScreen.routeName);
              Provider.of<Auth>(context, listen: false).logout();
            },
          ),
        ],
      ),
    );
  }
}

Here I'm getting Bottom overflowed by 98 pixel error. How to solve this. means bottom of app bar is overflowed when I added more list title. It must be scrollable.

CodePudding user response：

Wrap Column with SingleChildScrollView like this

drawer: Drawer(
child: SingleChildScrollView(
     child: Column(
     children: <Widget>[
     ...
    ]))

CodePudding user response：

1. wrap your Columnm with SingleChildScrollView or
2. u can use list view also

 return Drawer(
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
                 ...
              ]
            )
          )

 return Drawer(
      child: ListView(
        children: <Widget>[
                  ...
                ]
              )
            )

CodePudding user response：

You just need to Wrap your Column with SingleChildScrollView

Drawer(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
             ...
              ],
            ),
          ),

CodePudding user response：

You can also use ListView to make it scrollable.

Drawer(
    child: ListView(
      children: <Widget>[           
          AppBar(
        title: Text('MyApp'),
        automaticallyImplyLeading: false,
      ),
      Divider(),
      ListTile(
        leading: Icon(Icons.shop),
        title: Text('Home'),
        onTap: () {
          Navigator.of(context).pushReplacementNamed('/');
        },
      ),
]),),