Flutter Responsive Admin Template -2
Last updated Feb 11, 2020Flutter 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 :
|
|
|
|
1260 Views |