Flutter Responsive Admin Template -2

Last updated Feb 11, 2020

Flutter Responsive Admin Template -2 

Hello Guys, In the previous post we learn create simple Web Admin Page, in this POst we are going to add how to run it on mobile.

pubspec.yaml

Update pubspec.yaml file with below plugins

dev_dependencies:
  flutter_test:
    sdk: flutter
  responsive_builder: ^0.1.5
  universal_html: ^1.1.12

 

responsive_builder has widget ScreenTypeLayout which is use to handle the layout for mobile and desktop and tablet design

ScreenTypeLayout(
    {Key key, this.breakpoints, Widget watch, Widget mobile, Widget tablet, Widget desktop}) :
    this.watch = _builderOrNull(watch),
    this.mobile = _builderOrNull(mobile),
    this.tablet = _builderOrNull(tablet),
    this.desktop = _builderOrNull(desktop),
    super(key: key)

 

universal_html is used to read the Web Html tags and apply different properties for HTML tags

 

Now update folder structure like below

 

Now update below files in respective folders

Web Folder 

adminpageweb.dart

import 'package:flutter/material.dart';
import 'hover_extensions.dart';
class AdminPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      title: ' Flutter Template',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          fontFamily: 'Quicksand',
          //primarySwatch: Colors.purple,
          appBarTheme: AppBarTheme(
            color: Color(0xffEDEDED),
          ),
          primaryTextTheme: TextTheme(
            title: TextStyle(
              color: Color(0xff73879C),
              fontWeight: FontWeight.bold,
            ),
          )
      ),

home: DashboardWidget(),


    );
  }
}
class DashboardWidget extends StatefulWidget {
  @override
  _DashboardWidgetState createState() => _DashboardWidgetState();
}

class _DashboardWidgetState extends State<DashboardWidget> {
  int _currentPage = 0;
  final List<Widget> _pages = [
    HomePage(),
    ReceiptForm(),
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
        children: <Widget>[
          Container(
            color: Colors.brown,

            child:
            Drawer(
              child:
              Container(
                color: Colors.brown,
                child: ListView(
                  children: <Widget>[
                    DrawerHeader(
                      //padding: EdgeInsets.zero,
                      padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 15.0),
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              SizedBox(
                                height: 130,
                              ),
                              ClipRRect(
                                borderRadius: BorderRadius.circular(25.0),
                                child: Image.network(
                                  "https://i.pinimg.com/originals/43/1d/ae/431daea0125bd1d216f7066f99b5d193.jpg",
                                  width: 100,
                                  height:100,
                                ),
                              ),
                              SizedBox(
                                width: 20,
                              ),
                              Flexible(
                                child: Stack(
                                  children: <Widget>[
                                    Row(
                                      children: <Widget>[
                                        Text('Welcolme',
                                            style: TextStyle(
                                                fontSize: 13,
                                                color: Color(0xffBAB8B8))),
                                      ],
                                    ),
                                    Row(
                                      children: <Widget>[
                                        SizedBox(
                                          height: 48,
                                        ),
                                        Text(
                                          'Priyanka',
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Color(0xffECF0F1)),
                                        ),
                                      ],
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ],
                      ),
                      decoration: BoxDecoration(
                        color: Color(0xff2A3F54),
                      ),
                    ),
                    ListTile(
                      leading: const Icon(Icons.home, color: Color(0xffE7E7E7),),
                      title: Text('Home', style: TextStyle(color: Color(0xffE7E7E7), fontSize: 14,),),
                      onTap: () {
//                      HomePage();
                        setState(() {
                          _currentPage = 0;
                        });
                      },
                    ),
                    ListTile(
                      leading: const Icon(Icons.person_add, color: Color(0xffE7E7E7)),
                      title: Text('Add users',style: TextStyle(color: Color(0xffE7E7E7), fontSize: 14,) ),
                      onTap: () {
//                      HomePage();
                        setState(() {
                          _currentPage = 1;
                        });
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),

          Expanded(
            child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.pink,
                automaticallyImplyLeading:
                MediaQuery.of(context).size.width < 600,
                title: Text(' Dashboard Template',style: TextStyle(color: Colors.white),),
                actions: <Widget>[IconButton(
                  icon: const Icon(Icons.exit_to_app, color: Color(0xff2A3F54),),
                  tooltip: 'Logout',
                  onPressed: () {

                  },
                ),],
              ),
              body: _pages[_currentPage],
            ),
          ),
        ]
    );


  }

}


class HomePage extends StatefulWidget {
  // name({Key key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Scaffold(
        body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:  4,mainAxisSpacing: 0,crossAxisSpacing: 0,childAspectRatio: 1),
              scrollDirection: Axis.vertical,

              children: [
                Stack(
                  children: [
                    Card(
                      color: Colors.purple,
                      child: Center(child: Icon(Icons.account_circle,color: Colors.white,size: 100,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ).showCursorOnHover.moveUpOnHover,
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.deepOrange,
                      child: Center(child: Icon(Icons.map,color: Colors.white,size: 100,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ).showCursorOnHover.moveUpOnHover,
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.green,
                      child: Center(child: Icon(Icons.flag,color: Colors.white,size: 100,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ).showCursorOnHover.moveUpOnHover,
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.deepOrange,
                      child: Center(child: Icon(Icons.extension,color: Colors.white,size: 100,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ).showCursorOnHover.moveUpOnHover,
                  ],
                ),


                Stack(
                  children: [
                    Card(
                      color: Colors.white,
                      child: Center(child: Icon(Icons.security,color: Colors.green,size: 100,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ).showCursorOnHover.moveUpOnHover,
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.white,
                      child: Center(child: Icon(Icons.search,color: Colors.deepOrange,size: 100,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ).showCursorOnHover.moveUpOnHover,
                  ],
                ),

              ],)
        )

        ,
      ),
    );

  }
}

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

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

class _ReceiptFormState extends State<ReceiptForm> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child:
        Column(
          children: <Widget>[
            Center(child: Text('Add users page')),
          ],
        ),),
    );
  }
}
hover_extensions.dart
import 'package:flutter/material.dart';
import 'translate_on_hover.dart';
import 'package:universal_html/html.dart' as html;

extension HoverExtensions on Widget {
// Get a regerence to the body of the view
static final appContainer = html.window.document.getElementById('app-container');
Widget get showCursorOnHover {
  return MouseRegion(
    child: this,
    // When the mouse enters the widget set the cursor to pointer
    onHover: (event) {
      appContainer.style.cursor = 'pointer';
    },
    // When it exits set it back to default
    onExit: (event) {
      appContainer.style.cursor = 'default';
    },
  );
}
Widget get moveUpOnHover {
  return TranslateOnHover(
    child: this,
  );
}
}
translate_on_hover.dart
import 'package:flutter/material.dart';
class TranslateOnHover extends StatefulWidget {
  final Widget child;
  // You can also pass the translation in here if you want to
  TranslateOnHover({Key key, this.child}) : super(key: key);
  @override
  _TranslateOnHoverState createState() => _TranslateOnHoverState();
}
class _TranslateOnHoverState extends State<TranslateOnHover> {
  final nonHoverTransform = Matrix4.identity()..translate(0, 0, 0);
  final hoverTransform = Matrix4.identity()..translate(0, 250, 0);
  bool _hovering = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (e) => _mouseEnter(true),
      onExit: (e) => _mouseEnter(false),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        child: widget.child,
        transform: _hovering ? hoverTransform : nonHoverTransform,
      ),
    );
  }
  void _mouseEnter(bool hover) {
    setState(() {
      _hovering = hover;
    });
  }
}

 

Mobile Folder

mobilepage.dart

import 'package:flutter/material.dart';
class AdminPageMobile extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return AdminPageMobileState();
  }

}
class AdminPageMobileState extends State<AdminPageMobile>{
  int _currentPage = 0;
  GlobalKey<ScaffoldState> _scaffoldKey=GlobalKey<ScaffoldState>();
  final List<Widget> _pages = [
    HomePage(),
    ReceiptForm(),
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("Notes"),
      ),
      drawer:  Drawer(
        child:
        Container(
          color: Colors.brown,
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                //padding: EdgeInsets.zero,
                padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 15.0),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        SizedBox(
                          height: 130,
                        ),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(25.0),
                          child: Image.network(
                            "https://i.pinimg.com/originals/43/1d/ae/431daea0125bd1d216f7066f99b5d193.jpg",
                            width: 100,
                            height:100,
                          ),
                        ),
                        SizedBox(
                          width: 20,
                        ),
                        Flexible(
                          child: Stack(
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  Text('Welcolme',
                                      style: TextStyle(
                                          fontSize: 13,
                                          color: Color(0xffBAB8B8))),
                                ],
                              ),
                              Row(
                                children: <Widget>[
                                  SizedBox(
                                    height: 48,
                                  ),
                                  Text(
                                    'Priyanka',
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        color: Color(0xffECF0F1)),
                                  ),
                                ],
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ],
                ),
                decoration: BoxDecoration(
                  color: Color(0xff2A3F54),
                ),
              ),
              ListTile(
                leading: const Icon(Icons.home, color: Color(0xffE7E7E7),),
                title: Text('Home', style: TextStyle(color: Color(0xffE7E7E7), fontSize: 14,),),
                onTap: () {

                  _scaffoldKey.currentState.openEndDrawer();
                  setState(() {
                    _currentPage = 0;
                  });
                },
              ),
              ListTile(
                leading: const Icon(Icons.person_add, color: Color(0xffE7E7E7)),
                title: Text('Add users',style: TextStyle(color: Color(0xffE7E7E7), fontSize: 14,) ),
                onTap: () {
                  _scaffoldKey.currentState.openEndDrawer();

                  setState(() {
                    _currentPage = 1;
                  });
                },
              ),
            ],
          ),
        ),
      ),
      body: _pages[_currentPage],
    );

  }

}



class HomePage extends StatefulWidget {
  // name({Key key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Scaffold(
        body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:  3,mainAxisSpacing: 0,crossAxisSpacing: 0,childAspectRatio: 1),
              scrollDirection: Axis.vertical,

              children: [
                Stack(
                  children: [
                    Card(
                      color: Colors.purple,
                      child: Center(child: Icon(Icons.account_circle,color: Colors.white,size: 64,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ),
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.deepOrange,
                      child: Center(child: Icon(Icons.map,color: Colors.white,size: 64,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ),
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.green,
                      child: Center(child: Icon(Icons.flag,color: Colors.white,size: 64,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ),
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.deepOrange,
                      child: Center(child: Icon(Icons.extension,color: Colors.white,size: 100,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ),
                  ],
                ),


                Stack(
                  children: [
                    Card(
                      color: Colors.white,
                      child: Center(child: Icon(Icons.security,color: Colors.green,size: 64,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ),
                  ],
                ),
                Stack(
                  children: [
                    Card(
                      color: Colors.white,
                      child: Center(child: Icon(Icons.search,color: Colors.deepOrange,size: 64,)),
                    ),
                    Card(
                      color: Color(0X667C786A),
                      child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
                    ),
                  ],
                ),

              ],)
        )

        ,
      ),
    );

  }
}

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

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

class _ReceiptFormState extends State<ReceiptForm> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child:
        Column(
          children: <Widget>[
            Center(child: Text('Add users page')),
          ],
        ),),
    );
  }
}

 

Now it's time to update our main.dart file

import 'package:flutter/material.dart';
import 'package:flutter_responsive/web/adminpageweb.dart';
import 'package:responsive_builder/responsive_builder.dart';

import 'mobile/mobilepage.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: ScreenTypeLayout(
        breakpoints: ScreenBreakpoints(desktop: 900, tablet: 650, watch: 250),
        mobile: AdminPageMobile(),
        desktop: AdminPage(),
      ),
    );
  }
}


 

Thats it now run application in crome and mobile and check the responsive in both devices.

In my next post i will add Login page for Admin Panel

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1044 Views