How To Change Drawer Background Color Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

DrawerNavigator: Change Background Color · reactjs react-native react-​navigation. On react-navigation 's DrawerNavigator , is there a way On react-navigation's DrawerNavigator, is there a way to change the text color and background color for the item? By default, the color scheme looks like the following: Which is initialized by the following: export const Drawer = DrawerNavigator({ dOne: { screen: Screen1, }, dTwo: { screen: Screen2, } } );

How To Change Drawer Background Color Using Flutter App

Change Drawer Background Color
Complete Code For Change Drawer Background Color In Flutter
main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
        title: Text("Change Drawer Background Color"),
      ),
      drawer: Container(
        width: 200,
        child: Drawer(
          child: Container(
            color: Colors.blue[900],
            child: ListView(
              padding: EdgeInsets.all(10.0),
              children: [
                ListTile(
                  leading: Icon(Icons.home, color: Colors.white,),
                  title: Text('Home',style: TextStyle(color: Colors.white),),
                ),
                ListTile(
                  leading: Icon(Icons.person, color: Colors.white,),
                  title: Text('Profile',style: TextStyle(color: Colors.white),),
                ),
                ListTile(
                  leading: Icon(Icons.help_outline, color: Colors.white,),
                  title: Text('Help',style: TextStyle(color: Colors.white),),
                ),
                ListTile(
                  leading: Icon(Icons.help_outline, color: Colors.white,),
                  title: Text('Help',style: TextStyle(color: Colors.white),),
                ),
             ],
            ),
          ),
        ),
      ),
        body: Center(
          child: Text("Home Screen"),
      ),
    );
  }
}

Related Post