Flutter Responsive Layout

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Responsive Layout',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Responsive Layout'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  static bool isMobile(BuildContext context) {
    return MediaQuery.of(context).size.width <= 768;
  }

  static bool isWeb(BuildContext context) {
    return MediaQuery.of(context).size.width > 768;
  }

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _onHoverAbout = false;
  bool _onHoverPortfolio = false;
  bool _onHoverContact = false;

  @override
  Widget build(BuildContext context) {
   final drawerHeader = UserAccountsDrawerHeader(
     accountName: Text('User Name'),
     accountEmail: Text('[email protected]'),
     currentAccountPicture: CircleAvatar(
       child: FlutterLogo(size: 42.0),
       backgroundColor: Colors.white,
     ),
     otherAccountsPictures: <Widget>[
       CircleAvatar(
         child: Text('A', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500,),),
         backgroundColor: Colors.amber[900],
       ),
       CircleAvatar(
         child: Text('B', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500,),),
         backgroundColor: Colors.yellowAccent[700],
       )
     ],
   );

    final drawerItems = ListView(
      children: <Widget>[
       drawerHeader,
        ListTile(
          title: Text(
            'About',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w400,
            ),
          ),
          onTap: (){
            Navigator.pop(context);
            Navigator.of(context).push(_NewPage(1, 'About'));
          },
        ),
        ListTile(
          title: Text(
            'Portfolio',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w400,
            ),
          ),
          onTap: (){
            Navigator.pop(context);
            Navigator.of(context).push(_NewPage(2, 'Portfolio'));
          },
        ),
        ListTile(
          title: Text(
            'Contact',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.w400,
            ),
          ),
          onTap: (){
            Navigator.pop(context);
            Navigator.of(context).push(_NewPage(2, 'Contact'));
          },
        ),
      ],
    );

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: PreferredSize(
        child: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  color: Colors.grey[200],
                  offset: Offset(0, 2.0),
                  blurRadius: 10.0,
                  spreadRadius: 4.0),
            ],
          ),
          child: AppBar(
            backgroundColor: Colors.white,
            iconTheme: IconThemeData(color: Colors.grey[850]),
            title: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: 10.0),
                  child: FlutterLogo(size: 20.0),
                ),
                Text(
                  widget.title,
                  style: TextStyle(color: Colors.grey[800]),
                ),
              ],
            ),
            elevation: 0.0,
            actions: <Widget>[
              MyHomePage.isWeb(context)
                  ? ButtonBar(
                      alignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        InkWell(
                          onTap: (){
                            Navigator.of(context).push(_NewPage(1, 'About'));
                          },
                          onHover:(bool val){
                            setState((){
                              _onHoverAbout = val;
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.0),
                              color: _onHoverAbout ? Colors.blueAccent[700] : Colors.transparent,
                            ),
                            child: Text(
                              'About',
                              style: TextStyle(
                                fontSize: 18.0,
                                fontWeight: FontWeight.w500,
                                color: _onHoverAbout ? Colors.white : Colors.blueAccent[700],
                              ),
                            ),
                          ),
                        ),
                        InkWell(
                          onTap: (){
                            Navigator.of(context).push(_NewPage(2, 'Portfolio'));
                          },
                          onHover:(bool val){
                            setState((){
                              _onHoverPortfolio = val;
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.0),
                              color: _onHoverPortfolio ? Colors.blueAccent[700] : Colors.transparent,
                            ),
                            child: Text(
                              'Portfolio',
                              style: TextStyle(
                                fontSize: 18.0,
                                fontWeight: FontWeight.w500,
                                color: _onHoverPortfolio ? Colors.white : Colors.blueAccent[700],
                              ),
                            ),
                          ),
                        ),
                        InkWell(
                          onTap: (){
                            Navigator.of(context).push(_NewPage(2, 'Contacts'));
                          },
                          onHover:(bool val){
                            setState((){
                              _onHoverContact = val;
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.0),
                              color: _onHoverContact ? Colors.blueAccent[700] : Colors.transparent,
                            ),
                            child: Text(
                              'Contacts',
                              style: TextStyle(
                                fontSize: 18.0,
                                fontWeight: FontWeight.w500,
                                color: _onHoverContact ? Colors.white : Colors.blueAccent[700],
                              ),
                            ),
                          ),
                        ),
   
                      ],
                    )
                  : SizedBox(
                      height: 0.0,
                    ),
            ],
          ),
        ),
        preferredSize: Size.fromHeight(kToolbarHeight),
      ),
      body: Center(
       child: Text(
         "Hello World!", 
         style: Theme.of(context).textTheme.headline4,
       ),
      ),
      drawer: MyHomePage.isMobile(context)
        ? Drawer(
          elevation: 1.0,
          child: drawerItems,
        ) : null,
    );
  }
}

class _NewPage extends MaterialPageRoute<Null> {
  final int id;
  final String pageName;

  _NewPage(this.id, this.pageName)
      : super(builder: (BuildContext context) {
          return Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: Colors.blue,
              title: Text('$pageName'),
              elevation: 0.0,
            ),
            body: Center(
              child: Text('$id: $pageName Page'),
            ),
          );
        });
}