Flutter - Dashboard App | RRTutors

Last updated Oct 20, 2020

Hellow guys, Today we are going to create simple dashboard app with flutter.

Widgets used in the application :

MaterialApp

Scaffold

Stack

CustomPaint

GridView

Card

InkWell

Let's look into code.

Create a class ShapesPainter wich extends from CustomPainter.

Which will create Traingle shape with given height and width.

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    // set the paint color to be white
    paint.color = Colors.white;
    // Create a rectangle with size and width same as the canvas
    var rect = Rect.fromLTWH(0, 0, size.width, size.height);
    // draw the rectangle using the paint
    canvas.drawRect(rect, paint);
    paint.color = Colors.greenAccent[400];
    // create a path
    var path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, 0);
    // close the path to form a bounded shape
    path.close();
    canvas.drawPath(path, paint);
   /* // set the color property of the paint
    paint.color = Colors.deepOrange;
    // center of the canvas is (x,y) => (width/2, height/2)
    var center = Offset(size.width / 2, size.height / 2);
    // draw the circle with center having radius 75.0
    canvas.drawCircle(center, 75.0, paint);*/
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Now Let's create GrideView items

Widget createGridItem(int position)
  {
    var color=Colors.white;
    var icondata=Icons.add;

    switch(position)
    {

      case 0:
        color=Colors.cyan;
        icondata=Icons.map;
        break;
      case 1:
        color=Colors.deepPurple;

        icondata=Icons.add_location;
        break;
      case 2:
        color=Colors.orange[300];
        icondata=Icons.library_books;
        break;
      case 3:
        color=Colors.pinkAccent;
        icondata=Icons.access_time;
        break;
      case 4:
        color=Colors.teal[900];
        icondata=Icons.add_shopping_cart;
        break;
      case 5:
        color=Colors.green[600];
        icondata=Icons.list;
        break;
    }


   return Builder(builder: (context)
   {
     return Padding(
       padding: const EdgeInsets.only(left:10.0,right: 10,bottom: 5,top: 5),
       child: Card(
         elevation: 10,
         color: color,
         shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.all(Radius.circular(10)),
             side: BorderSide(
                 color: Colors.white
             ),

         ),
         child: InkWell(
           onTap: () {
             Scaffold.of(context).showSnackBar(
                 SnackBar(content: Text("Selected Item $position"))
             );
           },
           child: Center(
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
                 Icon(icondata,size:40,
                 color: Colors.white,),
                 Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Text("Add",style: TextStyle(color: Colors.white),),
                 )
               ],
             ),
           ),
         ),
       ),
     );;
   }
   );

  }
}

Here i have created a function which will returns the Widget with Card and Icons.

For OnClick event i have used InkWell widget .

Now create DashBord widget which will looks like below

class DashBoard extends StatelessWidget {
  Size size;

  @override
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink,
          leading: Icon(Icons.menu),
          title: Text(
            "Dashboard",
            textAlign: TextAlign.center,
          ),
        ),
        body: Stack(
          children: [
            Container(
              child: CustomPaint(
                painter: ShapesPainter(),
                child: Container(
                  height: size.height / 2,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 40),
              child: Padding(
                padding: const EdgeInsets.only(left: 20, right: 20),
                child: GridView.count(
                  crossAxisCount: 2,
                  children: [
                    createGridItem(0),
                    createGridItem(1),
                    createGridItem(2),
                    createGridItem(3),
                    createGridItem(4),
                    createGridItem(5),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

Now just run the app, you will get the design like above Image.

Check the complet code at my github account rrtutors

Flutter SQFlite CRUD operions example

Article Contributed By :

9495 Views