Interface do usuário do Painel Flutter
Tempo de leitura: 2 minutes
Neste tutorial, mostrarei como criar um design simples da interface do usuário do Dashboard no Flutter.P
Para este tutorial, precisaremos adicionar alguns ativos de imagem; portanto, crie uma nova pasta e chame-a de ativos e adicione o caminho dos ativos ao arquivo pubspec.yaml.
Agora vamos codificar o do nosso layout
Ativos (Assets) para este projeto
Download Assets
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home:Dashboard() ) ); class Dashboard extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: const EdgeInsets.all(12.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Icon(Icons.menu, color: Colors.white,size: 52.0,), Image.asset("assets/image.png",width: 52.0,) ], ), ), Padding( padding: const EdgeInsets.all(18.0), child: Text( "Welcome, Doctor code \nSelect an option", style: TextStyle( color: Colors.white, fontSize: 28.0, fontWeight: FontWeight.bold ), textAlign: TextAlign.start, ), ), Padding( padding: const EdgeInsets.all(12.0), child: Center( child: Wrap( spacing:20, runSpacing: 20.0, children: <Widget>[ SizedBox( width:160.0, height: 160.0, child: Card( color: Color.fromARGB(255,21, 21, 21), elevation: 2.0, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0) ), child:Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ Image.asset("assets/todo.png",width: 64.0,), SizedBox( height: 10.0, ), Text( "Todo List", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0 ), ), SizedBox( height: 5.0, ), Text( "2 Items", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w100 ), ) ], ), ) ), ), ), SizedBox( width:160.0, height: 160.0, child: Card( color: Color.fromARGB(255,21, 21, 21), elevation: 2.0, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0) ), child:Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ Image.asset("assets/note.png",width: 64.0,), SizedBox( height: 10.0, ), Text( "Notes", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0 ), ), SizedBox( height: 5.0, ), Text( "12 Items", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w100 ), ) ], ), ) ), ), ), SizedBox( width:160.0, height: 160.0, child: Card( color: Color.fromARGB(255,21, 21, 21), elevation: 2.0, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0) ), child:Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ Image.asset("assets/calendar.png",width: 64.0,), SizedBox( height: 10.0, ), Text( "Agenda", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0 ), ), SizedBox( height: 5.0, ), Text( "4 Items", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w100 ), ) ], ), ) ), ), ), SizedBox( width:160.0, height: 160.0, child: Card( color: Color.fromARGB(255,21, 21, 21), elevation: 2.0, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0) ), child:Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ Image.asset("assets/settings.png",width: 64.0,), SizedBox( height: 10.0, ), Text( "Settings", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0 ), ), SizedBox( height: 5.0, ), Text( "6 Items", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w100 ), ) ], ), ) ), ), ), ], ), ), ) ], ) ) ); } }
Este projeto é muito simples, caso tenha duvidas não deixe de perguntar nos comentários.