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
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