Debug School

rakesh kumar
rakesh kumar

Posted on

HOW TO CHANGE THE WHOLE BACKGROUND COLOR OF DRAWER IN FLUTTER-FLUTTER

Output Screenshot:

SOLUTION

class MyDrawer extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return Drawer(
        elevation: 0,
        child: Container(
          color: Colors.blue,
        child: ListView(
          children: <Widget>[
            Container(
              height: 170,
              width: 170,
              padding: EdgeInsets.only(top:30),
              color: Colors.red,
              child: Column(children: <Widget>[
              Material(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Padding(padding: EdgeInsets.all(20.0),
                  child:  Image.network(  
                  'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',  
                  height: 80,  
                  width: 80  
              ),),
                ),
              ],),
            ),
            Container(
              color: Colors.red,
              child: Column(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.help_outline_sharp),
                    title: Text('Help', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                  ListTile(
                    leading: Icon(Icons.person),
                    title: Text('About us', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

output
Image description
after click drawer
Image description

class MyDrawer extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                Container(
                  height: 170,
                  width: 170,
                  padding: EdgeInsets.only(top:30),
                  color: Colors.blue,
                  child: Column(children: <Widget>[
                   Material(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Padding(padding: EdgeInsets.all(20.0),
                  child:  Image.network(  
                  'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',  
                  height: 80,  
                  width: 80  
              ),),
                ),
                  ],
                 ),
                ),
                ListTile(
                  leading: Icon(Icons.help_outline_sharp),
                  title: Text('Help', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.person),
                  title: Text('About us', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: ListTile(
              leading: Icon(Icons.logout),
              title: Text('Logout')
            ),
          ),
        ],
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

output
Image description

Scaffold(
  drawer:Theme(
    data:Theme.of(context).copyWith(
     canvasColor://the desired color will go here
    ),
    child:Drawer(/*drawer content*/)
  )
)
Enter fullscreen mode Exit fullscreen mode

Full Code:

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:holidaylandmark/main.dart';
import 'package:intl/intl.dart';


class Experiment extends StatefulWidget {
   Experiment({Key? key}) : super(key: key);

  @override
  State<Experiment> createState() => _ExperimentState();
}
class _ExperimentState extends State<Experiment> {

  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(title: Text('title')),  
      body: Center(child: Text(  
          'A drawer is an invisible side screen.',  
          style: TextStyle(fontSize: 20.0),  
          )  
      ),  
      drawer: Drawer(
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                Container(
                  height: 170,
                  width: 170,
                  padding: EdgeInsets.only(top:30),
                  color: Colors.blue,
                  child: Column(children: <Widget>[
                 Material(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Padding(padding: EdgeInsets.all(20.0),
                  child:  Image.network(  
                  'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',  
                  height: 80,  
                  width: 80  
              ),),
                ),
                  ],
                 ),
                ),
                ListTile(
                  leading: Icon(Icons.help_outline_sharp),
                  title: Text('Help', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.person),
                  title: Text('About us', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: ListTile(
              leading: Icon(Icons.logout),
              title: Text('Logout')
            ),
          ),
        ],
      ),
      ),
    );  
  }  
}
Enter fullscreen mode Exit fullscreen mode

Full Summary:

Refrence
Click here

Top comments (0)