Flutter Responsive Admin Template
Last updated Feb 09, 2020Flutter 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
html.window.document.getElementById('app-container'); will get the body of the page
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
Article Contributed By :
|
|
|
|
3234 Views |