Flutter Navigation Drawer

import "package:flutter/material.dart";

void main() {
  runApp(
    MaterialApp(
      home: Home(),
    ),
  );
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Title Bar"),
          centerTitle: true,
        ),
        drawer: Drawer(
          child: Column(
            children: [
              Container(
                width: double.infinity,
                padding: EdgeInsets.all(2),
                color: Theme.of(context).primaryColor,
                child: Center(
                  child: Column(
                    children: [
                      Container(
                        width: 100,
                        height: 100,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              image: NetworkImage(
                                  "https://images.unsplash.com/photo-1470194289342-3fc894aae071?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1568&q=80"),
                              fit: BoxFit.fill),
                        ),
                      ),
                      Text(
                        "Ram Pukar",
                        style: TextStyle(fontSize: 20.0, color: Colors.white),
                      ),
                      Text(
                        "sell.info@gmail.com",
                        style: TextStyle(fontSize: 15.0, color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
              ListTile(
                leading: Icon(Icons.person),
                title: Text("Personal"),
                subtitle: Text("About personal info"),
                onTap: null,
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text("Setting"),
                subtitle: Text("Best Setting"),
                onTap: null,
              ),
              ListTile(
                leading: Icon(Icons.info),
                title: Text("Info"),
                subtitle: Text("App info"),
                onTap: null,
              ),
            ],
          ),
        ),
        body: Center(
          child: Text("Body Text"),
        ),
      ),
    );
  }
}

-------------------

Output:

-----------------

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.