Conjunto de Projetos em Flutter para seu aprendizado.
Tempo de leitura: 6 minutes
São diversos projetos (Layout), que venho testado para aprender Flutter, e útil para quem está aprendendo, ou que precisa de alguma ideia.
- ChatApp
- CreditCard
- LoginApp
- LoginPage
- QrCode
- TravelApp
Conteudo
Primeiro Layout (ChatApp)
import 'package:flutter/material.dart'; class ChatApp extends StatefulWidget { @override _ChatAppState createState() => _ChatAppState(); } class _ChatAppState extends State<ChatApp> { //for the rest of the tutorial I'll need to import a set of images' Url for the avatar //this is my images list List<String> _avatarUrl = [ "https://images.unsplash.com/photo-1573890990305-0ab6a7195ab6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80", "https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", "https://images.unsplash.com/photo-1545130368-4c55e2418062?ixlib=rb-1.2.1&auto=format&fit=crop&w=926&q=80", "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", "https://images.unsplash.com/photo-1470441623172-c47235e287ee?ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80", "https://images.unsplash.com/photo-1458662236860-b721a6735660?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80", "https://images.unsplash.com/photo-1530268729831-4b0b9e170218?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80", "https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1188&q=80", "https://images.unsplash.com/photo-1525879000488-bff3b1c387cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80", "https://images.unsplash.com/photo-1535201344891-231e85e83c8a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" ]; //Avatar widget Widget avatarWidget(String urlImg, double radius) { return Container( width: radius, height: radius, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( fit: BoxFit.cover, alignment: Alignment.topCenter, image: NetworkImage(urlImg), )), ); } //StoryButton widget Widget storyButton(String urlImg, double radius) { return InkWell( onTap: () {}, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Container( width: radius, height: radius, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( fit: BoxFit.cover, alignment: Alignment.topCenter, image: NetworkImage(urlImg), )), ), ), ); } //List items widget Widget listItem( String urlImg, String userName, String, message, String hour) { return InkWell( onTap: () {}, child: Padding( padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0), child: Container( child: Row( children: [ avatarWidget(urlImg, 60.0), SizedBox(width: 10.0,), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( userName, style: TextStyle( color: Colors.black, fontSize: 20.0, fontWeight: FontWeight.bold, ), ), Text( message, style: TextStyle( color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.w300, ), ), ], ), ), Text( hour, style: TextStyle( color: Colors.grey[50], ), ) ], ), ), ), ); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Container( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 35.0), child: Column( children: [ //First let's create our menu bar Row( children: [ // for the first par i'll need to create a custom widget for my avatar button avatarWidget(_avatarUrl[0], 50.0), SizedBox(width: 10.0,), Expanded( child: Text( "Mensagem", style: TextStyle( color: Colors.black, fontSize: 20.0, fontWeight: FontWeight.w700, ), ), ), MaterialButton( onPressed: () {}, elevation: 0.0, padding: EdgeInsets.all(8.0), color: Colors.blue[300], shape: CircleBorder(), child: Icon(Icons.edit, color: Colors.white), ) ], ), //Now let's create the search bar SizedBox(height: 20.0,), TextField( cursorColor: Colors.white, style: TextStyle(color: Colors.white), decoration: InputDecoration( prefixIcon: Icon(Icons.search, color: Colors.white), hintText: "Pesquisar", contentPadding: EdgeInsets.only(left: 34.0), filled: true, fillColor: Colors.blue[300], border: OutlineInputBorder( borderRadius: BorderRadius.circular(50.0), borderSide: BorderSide.none, )), ), SizedBox(height: 20.0,), //Now it's time to create our list view for storys Container( height: 60.0, width: double.infinity, child: ListView( scrollDirection: Axis.horizontal, children: [ //let's now create our story widget, but before let's add the add button MaterialButton( onPressed: () {}, elevation: 0.0, padding: EdgeInsets.all(8.0), color: Colors.grey[800], shape: CircleBorder(), child: Icon(Icons.add, color: Colors.yellow[500]), ), //Now let's create our storybutton widget storyButton(_avatarUrl[1], 60.0), storyButton(_avatarUrl[2], 60.0), storyButton(_avatarUrl[3], 60.0), storyButton(_avatarUrl[4], 60.0), ], ), ), SizedBox( height: 10.0, ), //Now we will build the chat feed listview Expanded( child: ListView( children: [ //first let's create our list items widget listItem( _avatarUrl[2], "David ro", String, "Wassup", "9:53PM"), listItem(_avatarUrl[3], "kasidie", String, "We are waiting for you", "8:33PM"), listItem(_avatarUrl[4], "Lynda", String, "Hey can you help me", "6:54AM"), listItem(_avatarUrl[5], "Suizie Q", String, "hank you", "Yesterday"), listItem(_avatarUrl[7], "Joseph", String, "Hey wassup", "Yesterday"), listItem(_avatarUrl[8], "Jonathan", String, "okey", "Mon, 8:50AM"), //and now all what you have to do is to duplicate that line to have a real chat feed ], ), ) ], ), ), ), //Now i'm going to create the button menu bar bottomNavigationBar: BottomNavigationBar( backgroundColor: Colors.white, unselectedItemColor: Colors.grey, selectedItemColor: Colors.black, items: <BottomNavigationBarItem>[ BottomNavigationBarItem( label: "Chat", icon: Icon(Icons.message), ), BottomNavigationBarItem( label: "Friend Requests", icon: Icon(Icons.people), ), ], ), ); } }
Segundo Projeto (CreditCard)
import 'package:flutter/material.dart'; class CreditCard extends StatelessWidget { @override Widget build(BuildContext context) { final bottom = MediaQuery.of(context).viewInsets.bottom; return Scaffold( resizeToAvoidBottomInset: false, body: SingleChildScrollView( padding: EdgeInsets.only(bottom: bottom), reverse: true, child: SafeArea( child: Padding( padding: const EdgeInsets.fromLTRB(12.0,12.0,12.0,0), child: Column( children: <Widget>[ Card( child: Stack( children: <Widget>[ Image.asset("assets/cardcredit.png",fit: BoxFit.fill,), /* Padding( padding: const EdgeInsets.all(18.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Padding( padding: const EdgeInsets.symmetric(vertical:16.0, horizontal: 8.0), child: Text( "**** **** **** 6543", style: TextStyle( fontSize: 28.0, color: Colors.white ), ), ), SizedBox( height: 20.0, ), Row( children: <Widget>[ Column( children: <Widget>[ Text( "Expiry", style: TextStyle( color: Colors.white, fontSize: 22.0 ), ), SizedBox( height: 10.0, ), Text( "MM/YY", style: TextStyle( color: Colors.white, fontSize: 18.0, ), ) ], ), SizedBox( width: 50.0, ), Column( children: <Widget>[ Text( "CVV", style: TextStyle( color: Colors.white, fontSize: 22.0 ), ), SizedBox( height: 10.0, ), Text( "****", style: TextStyle( color: Colors.white, fontSize: 18.0, ), ) ], ) ], ), SizedBox( height: 8.0, ), Text( "Card Holder", style: TextStyle( color: Colors.white, fontSize: 28.0 ), textAlign: TextAlign.end, ), ], ), ),*/ ], ), elevation: 5.0, clipBehavior: Clip.antiAliasWithSaveLayer, semanticContainer: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.0) ), ), SizedBox( height: 20.0, ), Padding( padding: const EdgeInsets.all(8.0), child:Column( children: <Widget>[ TextFormField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(), ), labelText: "Credit Card Number", labelStyle: TextStyle( fontSize: 18.0 ) ), ), SizedBox( height: 20.0, ), TextFormField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(), ), labelText: "Credit Card Expiry Date", labelStyle: TextStyle( fontSize: 18.0 ) ), ), SizedBox( height: 20.0, ), TextFormField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(), ), labelText: "Credit Card Code", labelStyle: TextStyle( fontSize: 18.0 ) ), ), SizedBox( height: 20.0, ), TextFormField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(), ), labelText: "Credit Card Hodler Name", labelStyle: TextStyle( fontSize: 18.0 ) ), ), SizedBox( height: 20.0, ), FlatButton( color: Colors.pink, onPressed: (){}, shape: StadiumBorder(), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 50.0, vertical: 12.0), child: Text( "Pay", style: TextStyle( color: Colors.white, fontSize: 22.0 ), ), ), ) ], ) ) ], ), ), ), ), ); } }
Terceiro Projeto (LoginApp)
import 'package:flutter/material.dart'; class LoginApp extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: <Widget>[ Container( decoration: new BoxDecoration( image: new DecorationImage( image: NetworkImage('https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'), fit: BoxFit.fill ), ), ), Opacity( opacity: 0.5, child: Container( decoration: new BoxDecoration( gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [Colors.blue,Colors.purpleAccent], ), ), ), ), Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Login',style: TextStyle( fontSize: 60.0, letterSpacing: 2.0, color: Colors.white, fontStyle: FontStyle.italic, )), Padding( padding: EdgeInsets.symmetric(horizontal: 35.0, vertical: 22.0), child: TextField( decoration: InputDecoration( filled: true, fillColor: Colors.white, border: InputBorder.none, hintText: 'Email', contentPadding: EdgeInsets.all(16.0), prefixIcon: Icon(Icons.email,color: Colors.blue,) ), keyboardType: TextInputType.emailAddress, ), ), Padding( padding: EdgeInsets.symmetric(horizontal: 35.0, vertical: 12.0), child: TextField( decoration: InputDecoration( filled: true, fillColor: Colors.white, border: InputBorder.none, hintText: 'Senha', contentPadding: EdgeInsets.all(16.0), prefixIcon: Icon(Icons.lock,color: Colors.blue,) ), obscureText: true, ), ), Text("Esqueça sua senha ?", style: TextStyle(color: Colors.white),), SizedBox( height: 40.0, ), RaisedButton( onPressed: (){}, shape: StadiumBorder(), color: Colors.blueAccent, textColor: Colors.white, child: Text("Login",style: TextStyle(fontSize: 22.0),), padding: EdgeInsets.symmetric(vertical: 12.0,horizontal: 80.0), elevation: 0.0, ) ], ), ) ], ), ); } }
Quarto Projeto (LoginPage)
import 'package:flutter/material.dart'; class LoginPage extends StatefulWidget { const LoginPage({Key? key}) : super(key: key); @override State<LoginPage> createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { List<Color> colors = [Colors.blue.shade800, Colors.blue.shade400]; @override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: true, body: SingleChildScrollView( child: Container( constraints: BoxConstraints( maxWidth: MediaQuery.of(context).size.width, maxHeight: MediaQuery.of(context).size.height, ), decoration: BoxDecoration( gradient: LinearGradient( colors: colors, begin: Alignment.topLeft, end: Alignment.centerRight, ), ), child: Column( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( flex: 2, child: Padding( padding: const EdgeInsets.symmetric( vertical: 36.0, horizontal: 24.0), child: Column( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text( "Login", style: TextStyle( color: Colors.white, fontSize: 42.0, fontWeight: FontWeight.w800, ), ), SizedBox(height: 5.0,), Text( "Entrar com seu login", style: TextStyle( color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.w400, ), ) ], ), ), ), Expanded( flex: 5, child: Container( width: double.infinity, decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0), )), child: Padding( padding: const EdgeInsets.all(24.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( keyboardType: TextInputType.emailAddress, decoration: InputDecoration( filled: true, fillColor: Color(0xFFE7EDEB), hintText: "Email", prefixIcon: Icon( Icons.mail, color: Colors.grey[600], ), border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(8.0), ), ), ), SizedBox( height: 20.0, ), TextField( obscureText: true, decoration: InputDecoration( filled: true, fillColor: Color(0xFFE7EDEB), hintText: "senha", prefixIcon: Icon( Icons.lock, color: Colors.grey[600], ), border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(8.0), ), ), ), SizedBox( height: 10.0, ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Text( "Esqueceu a senha", textAlign: TextAlign.end, style: TextStyle( color: Colors.blue[800], decoration: TextDecoration.underline, ), ), ], ), SizedBox(height: 50.0,), Container( width: double.infinity, child: RaisedButton( onPressed: () {}, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), ), color: Colors.blue[600], child: const Padding( padding: EdgeInsets.symmetric(vertical: 18.0), child: Text( "Login", style: TextStyle( color: Colors.white, fontSize: 18.0, ), ), ), ), ), SizedBox(height: 80.0,), Text("Não tem uma conta? registrar agora") ], ), ), ), ) ], ), ), ), ); } }
Quinto Projeto (QrCode)
import 'package:flutter/material.dart'; import 'package:qr_flutter/qr_flutter.dart'; class QrCode extends StatefulWidget { const QrCode({Key? key}) : super(key: key); @override State<QrCode> createState() => _QrCodeState(); } class _QrCodeState extends State<QrCode> { String data = ""; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: AppStyle.primaryColor, body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Center( child: QrImage( data: data, backgroundColor: Colors.white, version: QrVersions.auto, size: 300.0, ), ), SizedBox( height: 24, ), Container( width: 300.0, child: TextField( //we will generate a new qr code when the input value change onChanged: (value) { setState(() { data = value; }); }, textAlign: TextAlign.center, style: TextStyle( color: Colors.white, ), decoration: InputDecoration( hintText: "Type the Data", filled: true, fillColor: AppStyle.textInputColor, border: InputBorder.none, ), ), ), SizedBox( height: 24.0, ), RawMaterialButton( onPressed: () {}, fillColor: AppStyle.accentColor, shape: StadiumBorder(), padding: EdgeInsets.symmetric( horizontal: 36.0, vertical: 16.0, ), child: Text( "Generate QR Code", ), ) ], ), ); } } class AppStyle { static Color primaryColor = Color(0xFF222222); static Color textInputColor = Color(0xFF404040); static Color accentColor = Color(0xFF4c90d2); }
Sexto Projeto (TravelApp)
import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; class TravelApp extends StatefulWidget { @override _TravelAppState createState() => _TravelAppState(); } class _TravelAppState extends State<TravelApp> { //Putting the Image List late int _current; List imgList = [ 'https://images.unsplash.com/photo-1590083948608-525d75ee5edb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80', 'https://images.unsplash.com/photo-1566763481246-3d765d357293?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80', 'https://images.unsplash.com/photo-1566764577421-ad670748f51c?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80', 'https://images.unsplash.com/photo-1566764579018-da7fde771fb4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80', 'https://images.unsplash.com/photo-1566763306929-a936c7856f7f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80', ]; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color(0xffF9F9F9), body: SafeArea( child: Padding( padding: const EdgeInsets.symmetric(vertical:28.0,horizontal: 12.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ const Text( "Descubra um novo horizonte", style: TextStyle( color: Color(0xff142243), fontSize: 32.0, ), textAlign: TextAlign.start, ), SizedBox(height: 20.0,), const Text( "escolha o seu próximo destino e boa viagem", style: TextStyle( fontSize:18.0, color: Color(0xff142243), letterSpacing: 3.0, height: 1.5 ), ), SizedBox(height: 30.0,), CarouselSlider( options: CarouselOptions( height: 400.0, initialPage: 0, enlargeCenterPage: true, onPageChanged: (index,reason){ setState(() { _current = index; }); },), items:imgList.map((imgUrl){ return Builder( builder: (BuildContext context){ return Container( width: MediaQuery.of(context).size.width, margin: EdgeInsets.all(18.0), decoration: BoxDecoration( color: Colors.pinkAccent, borderRadius: BorderRadius.circular(12.0) ), child: Image.network(imgUrl,fit: BoxFit.fill,), ); }, ); }).toList() , ), ], ), ), ), bottomNavigationBar: BottomNavigationBar( backgroundColor: Colors.white, unselectedItemColor: Colors.grey, selectedItemColor: Colors.black, showSelectedLabels: true, showUnselectedLabels: true, items:<BottomNavigationBarItem>[ BottomNavigationBarItem( label: 'Flight', icon: Icon(Icons.airplanemode_active), ), BottomNavigationBarItem( label: 'Sua Viagem', icon: Icon(Icons.book,size: 22,) ), BottomNavigationBarItem( label: 'Hoteis', icon: Icon(Icons.hotel), ), BottomNavigationBarItem( label: 'Destinatario', icon: Icon(Icons.map) ), ], ), ); } }
Abaixo, você encontra além destes 6 projetos (Layouts) + alguns e os Assets e componentes necessarios no pubspec.yaml