Custom Drawer & Progress Indicators

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom prgsIndicators & Drawer',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Custom prgsIndicators & Drawer'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool _onHoverMailBox = false;
  bool _onHoverFavorite = false;
  bool _onHoverSettings = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        elevation: 0.0,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 20.0,
              ),
              child: Container(
                width: 100.0,
                height: 100.0,
                child: ClipRRect(
                  borderRadius: BorderRadius.horizontal(
                    left: Radius.circular(30.0), 
                    right: Radius.circular(30.0),
                  ),
                  child: CircularProgressIndicator(
                    strokeWidth: 20.0,
                    valueColor: AlwaysStoppedAnimation<Color>(
                      Colors.indigo[700],
                    ),
                    backgroundColor: Colors.grey[350],
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 50.0, 
                vertical: 20.0,
              ),
              child: Container(
                height: 25.0,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: LinearProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(
                      Colors.blueAccent[700],
                    ),
                    backgroundColor: Colors.blue[100],
                  ),
                ),
              ),
            ),
            
          ],
        ),
      ),
      drawer: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 200.0,),
        child: Container(
          width: 82.0,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(25.0)),
            child: Drawer(
              elevation: 1.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  InkWell(
                    hoverColor: Colors.transparent,
                    onTap: (){
                      Navigator.pop(context);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => MailBox(),
                        ),
                      );
                    },
                    onHover: (bool val){
                      setState((){
                        _onHoverMailBox = val;
                      });
                    },
                    child: Column(
                      children: <Widget>[
                        Icon(
                          Icons.markunread_mailbox,
                          color: _onHoverMailBox ? Colors.red : Colors.grey,
                        ),
                        if(_onHoverMailBox) Text('Inbox'),
                      ],
                    ),
                  ),
                  InkWell(
                    hoverColor: Colors.transparent,
                    borderRadius: BorderRadius.all(Radius.circular(35.0)),
                    onTap: (){
                      Navigator.pop(context);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => Favorite(),
                        ),
                      );
                    },
                    onHover: (bool val){
                      setState((){
                        _onHoverFavorite = val;
                      });
                    },
                    child: Column(
                      children: <Widget>[
                        Icon(
                          Icons.favorite,
                          color: _onHoverFavorite ? 
                          Colors.yellow[900] : Colors.grey,
                        ),
                        if(_onHoverFavorite) Text('Favorites'),
                      ],
                    ),
                  ),
                  InkWell(
                    hoverColor: Colors.transparent,
                    borderRadius: BorderRadius.all(Radius.circular(35.0)),
                    onTap: (){
                      Navigator.pop(context);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => Settings(),
                        ),
                      );
                    },
                    onHover: (bool val){
                      setState((){
                        _onHoverSettings = val;
                      });
                    },
                    child: Column(
                      children: <Widget>[
                        Icon(
                          Icons.settings,
                          color: _onHoverSettings ? 
                          Colors.grey[900] : Colors.grey,
                        ),
                        if(_onHoverSettings) Text('Settings'),
                      ],
                    ),
                  ),
                  
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MailBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MailBox'),
        elevation: 0.0,
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: Text('MailBox Page', style: Theme.of(context).textTheme.headline4),
      ),
    );
  }
}

class Favorite extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Favorite'),
        elevation: 0.0,
        backgroundColor: Colors.yellow[800],
      ),
      body: Center(
        child: Text('Favorite Page', style: Theme.of(context).textTheme.headline4),
      ),
    );
  }
}

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
        elevation: 0.0,
        backgroundColor: Colors.grey[900],
      ),
      body: Center(
        child: Text('Settings Page', style: Theme.of(context).textTheme.headline4),
      ),
    );
  }
}