Flutter Responsive Admin Template
Flutter Responsive Admin Template Hello Guys, In this post we are going to create Flutter Responsive Admin dashboard with Flutter Let's Start Step 1: Create flutter project in android studio Step 2: Create AdminPage widget class AdminPage extends StatelessWidget { title: 'Flutter Template', Step 3: DashBoard Widget Our Dashboard widget contains Sidebar and details page of each items class DashboardWidget extends StatefulWidget { class _DashboardWidgetState extends State { @override } Step 4: Navigation Bar Container( child: Add above code inside Container of Dashboard widget Step 5: Details Page Expanded( }, Add above code inside Expand of Dashboard widget Step 6: HomePage class _HomePageState extends State { @override children: [ ], ],) , } Step 7: ReceiptForm class ReceiptForm extends StatefulWidget { @override class _ReceiptFormState extends State { Handle Mouse Pointer and MouseOver Events To hanlde Mouse Pointer a we need to create Extension Step 8: Extension widget extension HoverExtensions on Widget { here So update you index.html file with below code Now update widget where we want to hanlde the mouse pointer Card(color: Color(0X667C786A), Step 9: Handle MouseOver events Create Transulate Animation class TranslateOnHover extends StatefulWidget { and add below widget in HoverExtension widget Widget get moveUpOnHover { Then add below code for which widget we want to animate on the mousehover Card( That's it, now run the application and you will get the Output. If you have any quries please comment in the below 
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Quicksand',
appBarTheme: AppBarTheme(
color: Color(0xffEDEDED),
),
primaryTextTheme: TextTheme(
title: TextStyle(
color: Color(0xff73879C),
fontWeight: FontWeight.bold,
),
)
),
home: DashboardWidget(),
);
}
}
@override
_DashboardWidgetState createState() => _DashboardWidgetState();
}
int _currentPage = 0;
final List _pages = [
HomePage(),
ReceiptForm(),
];
Widget build(BuildContext context) {
// TODO: implement build
return Row(
children: [
Container(),
Expanded(),
]
);
}
color: Colors.brown,
Drawer(
child:
Container(
color: Colors.brown,
child: ListView(
children: [
DrawerHeader(
//padding: EdgeInsets.zero,
padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 15.0),
child: Column(
children: [
Row(
children: [
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: [
Row(
children: [
Text('Welcolme',
style: TextStyle(
fontSize: 13,
color: Color(0xffBAB8B8))),
],
),
Row(
children: [
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;
});
},
),
],
),
),
),
)
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
automaticallyImplyLeading:
MediaQuery.of(context).size.width < 600,
title: Text(' Dashboard Template',style: TextStyle(color: Colors.white),),
actions: [IconButton(
icon: const Icon(Icons.exit_to_app, color: Color(0xff2A3F54),),
tooltip: 'Logout',
onPressed: () {
),],
),
body: _pages[_currentPage],
),
)
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,
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),)),
)
),
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),)),
)
],
),
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),)),
)
],
),
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: 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.search,color: Colors.deepOrange,size: 100,)),
),
Card(
color: Color(0X667C786A),
child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
)
],
),
)
),
);
}
ReceiptForm({Key key}) : super(key: key);
_ReceiptFormState createState() => _ReceiptFormState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child:
Column(
children: [
Center(child: Text('Add users page')),
],
),),
);
}
}
// 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';
},
);
}
}
html.window.document.getElementById('app-container'); will get the body of the page
child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
).showCursorOnHover
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 {
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;
});
}
}
return TranslateOnHover(
child: this,
);
}
color: Color(0X667C786A),
child: Center(child: Text("",style: TextStyle(color: Colors.white),)),
).showCursorOnHover.moveUpOnHover,
630 Views