MANVIA BLOGLayout Cheat Sheet
-
Usage
1 Page Navigation 1. GestureDetector
2. InkWell
3. ElevatedButton
4. ListTiel()
1. GestureDetector
2. InkWellGestureDetector( onTap: () { // Handle the onTap gesture here print("Container tapped!"); }, child: Container( width: 200, height: 200, color: Colors.blue, child: Center( child: Text( "Tap Me!", style: TextStyle(fontSize: 24, color: Colors.white), ), ), ), )
3. ElevatedButtonInkWell( onTap: (){}, child: Container( padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24), decoration: BoxDecoration( borderRadius: BorderRadius.circular(5), // adding color will hide the splash effect // color: Colors.blueGrey.shade200, ), child: Text("Unlock", style: TextStyle(fontSize: 24),), ), ); ElevatedButton( onPressed: (){}, child: Text( "Join" ), ) 2 Bg image / shadow / margin /padding /width / height / Color / Alignment Container() - All
Card () - allows shadow
Padding() - only for padding
Sizebox () - width & height
Center() - center Alignment
3 Padding Only Padding() 4 Alignment Only Align() 5 Display text or string Text() 6 Display string with various different styles RichText() 7 Listing/ Scrollable listing 1. Listview()
2. SingleChildScrollView()
3. ...List.generate()
8 Background image 1. container()
2. stack()
9 Spacing between elements 1. container() and apply margin
2. SizedBox()
10 Allow multiple child widgets 1. Row()
2. Column()
3. Stack()
4. ListView()
11 App Title and App body 1. Scaffold()
12 Modal window 1. showModalBottomSheet()
13 Image 1. Container()
2. CircleAvatar()
3. Image()
13 Slider 1. PageView()
2. carousel_slider()
1 
Widget build(BuildContext context) { return Material( color: Colors.blue, child: SafeArea( child: SizedBox.expand( child: Card(color: Colors.yellowAccent), ), ), ); } 1 
Row ( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 2 
Column ( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 3 
Row ( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 4 
Column ( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 5 
Row ( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 6 
Column ( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 7 
Row ( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 8 
Column ( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ], ), 8 
Container( height: 55, padding: const EdgeInsets.all(12), //for round shape decoration: BoxDecoration( color: state.white, borderRadius: BorderRadius.circular(25), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.25), spreadRadius: 5, blurRadius: 7, offset: const Offset(1, 6), // Shadow position ), ], ), child: Row( children: const [ //leftside icon Icon( Icons.search, // color: Colors.black, size: 30, ), //right side text Text( ' Search for members', style: TextStyle(color: Colors.grey, fontSize: 16), ) ], ), ), 8 
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ //Left side text const Text( 'Profile', style: TextStyle( // color: Colors.black, fontSize: 38, fontWeight: FontWeight.w500), ), //right side icons Row( children: [ //icon 1 Container( width: 50, height: 50, decoration: BoxDecoration( color: state.white, shape: BoxShape.circle, ), child: const Icon( CupertinoIcons.pencil_ellipsis_rectangle), ), const SizedBox( width: 15, ), //icon 2 Container( width: 50, height: 50, decoration: BoxDecoration( color: state.white, shape: BoxShape.circle, ), child: InkWell( onTap: () { ref.read(appController.notifier).changeTheme(); }, child: const Icon(Icons.settings_outlined)), ), ], ) ], ), 8 
Row( children: [ //left side profile image Padding( padding: const EdgeInsets.all(10.0), child: ClipRRect( borderRadius: BorderRadius.circular(80), child: Image.network( 'https://encrypted-tbn0.gstatic.com/profile1.png', fit: BoxFit.cover, height: 100, width: 100, ), ), ), //for 3 lines Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( 'Adam', style: TextStyle( fontSize: 21, ), ), const SizedBox( height: 6, ), Text( 'Hey! Here to sell stuff that I forgot\n they exist!', style: TextStyle(fontSize: 15, color: Colors.grey[500]), ), const SizedBox( height: 11, ), // for 2 cols Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: const [ Text( 'Followers:49', style: TextStyle(fontSize: 15, color: Colors.grey), ), SizedBox( width: 30, ), Text( 'Following:81', style: TextStyle(fontSize: 15, color: Colors.grey), ), ], ), ], ) ], ), 8 
// Padding layout for surrounding spaces Padding( padding: const EdgeInsets.all(12.0), // Container layout for round shape child: Container( height: 55, padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: state.white, borderRadius: BorderRadius.circular(25), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.25), spreadRadius: 5, blurRadius: 7, offset: const Offset(1, 6), // Shadow position ), ], ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ //left side stars Row( children: [ const Icon( Icons.star, color: Colors.yellow, size: 30, ), const Icon( Icons.star, color: Colors.yellow, size: 30, ), const Icon( Icons.star, color: Colors.yellow, size: 30, ), const Icon( Icons.star, color: Colors.yellow, size: 30, ), Icon( Icons.star, color: Colors.grey[300], size: 30, ), ], ), //right side text const Text( '41 Reviews', style: TextStyle(color: Colors.grey, fontSize: 16), ) ], ), ), ), 8 
Expanded( child: Container( color: Colors.black, child: SingleChildScrollView( child: Column( children: [ // Padding layout for item padding Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( // Padding layout for item padding child: Padding( padding: const EdgeInsets.only(left: 12.0, right: 8), // Container layout for item decoration child: Container( padding: const EdgeInsets.all(10), height: 250, decoration: BoxDecoration( borderRadius: BorderRadius.circular(25), color: Colors.white, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // add sub layouts ], ), ), //end of Container ), //end of Padding ), // add send item ] ) //end row ) // end padding // repeat second row boxes ] ) // end col ) // end SingleChildScrollView ) end Container ) // end Expanded 8 
Column( children: [ ListTile( leading: ClipRRect( borderRadius: BorderRadius.circular(80), child: Image.network( 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZmFjZXxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80', fit: BoxFit.cover, height: 60, width: 60, ), ), title: const Text('Jake'), subtitle: Text( 'There are no major defects or damages..', style: TextStyle(color: state.black), ), trailing: const Text( 'Now', // style: TextStyle(color: Colors.black), ), ), const SizedBox( height: 10, ), //repeat ListTile ] ) 8 
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ // Container layout for decoration Container( height: screenSize.height * 0.065, width: screenSize.width * 0.115, decoration: BoxDecoration( color: lbackgroundclr, borderRadius: BorderRadius.circular(15)), child: const Icon( Icons.sort_rounded, color: whiteclr, ), ), Column( children: [ const Text( "Deliver to", style: TextStyle( color: whiteclr, fontSize: 17, fontWeight: FontWeight.w500), ), SizedBox( height: screenSize.height * 0.002, ), const Text( "02-075 Konstructorska 9", style: TextStyle( color: primaryclr, fontSize: 15, ), ), ], ), // Container layout for decoration Container( height: screenSize.height * 0.065, width: screenSize.width * 0.115, decoration: BoxDecoration( image: const DecorationImage( fit: BoxFit.cover, image: NetworkImage( "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz-LJaTp0HFRT2GHznf3n7iSAzu-z7och7Vc0GsJkTHWEk67OjQ0t0o6piSTpTv9sr7UI&usqp=CAU")), color: lbackgroundclr, borderRadius: BorderRadius.circular(15)), ), ], ), 8 
SizedBox( height: screenSize.height * 0.185, //for list view child: ListView.builder( shrinkWrap: true, physics: const ScrollPhysics(), scrollDirection: Axis.horizontal, // for horizontal listing itemCount: smallcon.length, itemBuilder: ((context, index) { //padding layout for padding between the items return Padding( padding: const EdgeInsets.all(5.0), child: InkWell( onTap: (() { Navigator.push( context, MaterialPageRoute( builder: ((context) => DetailScreen( details: smallcon[index], detail: BigCon[index], )), ), ); }), //Container layout for outer decoration child: Container( width: screenSize.width * 0.22, decoration: BoxDecoration( color: lbackgroundclr, borderRadius: BorderRadius.circular(55), ), child: Padding( padding: const EdgeInsets.all(4.0), child: Column( children: [ //Container layout for inner round shaped image Container( height: screenSize.height * 0.1, width: screenSize.width * 0.2, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: NetworkImage( smallcon[index].image)), shape: BoxShape.circle), ), SizedBox( height: screenSize.height * 0.015, ), Text( smallcon[index].name, style: const TextStyle(color: whiteclr), ), ], ), ), ), ), ); }), ), ), 8 
SizedBox( height: screenSize.height * 0.357, //for list ListView child: ListView.builder( shrinkWrap: true, physics: const ScrollPhysics(), scrollDirection: Axis.horizontal, //for horizontal listing itemCount: BigCon.length, itemBuilder: ((context, index) { //padding layout for item padding return Padding( padding: const EdgeInsets.all(7.0), //stack layout for favorite_rounded icon child: Stack( children: [ //InkWell to apply touch event to the entire item box InkWell( onTap: (() { Navigator.push( context, MaterialPageRoute( builder: ((context) => DetailScreen( details: smallcon[index], detail: BigCon[index], )), ), ); }), //Container for round shapped item box child: Container( width: screenSize.width * 0.65, decoration: BoxDecoration( color: lbackgroundclr, borderRadius: BorderRadius.circular(15), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: screenSize.height * 0.19, width: screenSize.width * 0.65, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: NetworkImage(BigCon[index].image), ), borderRadius: const BorderRadius.only( topLeft: Radius.circular(15), topRight: Radius.circular(15), ), ), ), Padding( padding: const EdgeInsets.all(8.0), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( BigCon[index].name, style: const TextStyle( color: whiteclr, fontSize: 17, fontWeight: FontWeight.w500), ), Row( children: [ const Icon( Icons.alarm, size: 16, color: Color( 0xff513330, ), ), Text( BigCon[index].time, style: const TextStyle( fontSize: 15, color: whiteclr), ), ], ), ], ), SizedBox( height: screenSize.height * 0.005, ), Row( children: [ const Icon( Icons.star, color: Color(0xffFCD506), size: 16, ), Text( BigCon[index].ratting, style: const TextStyle( fontSize: 14.5, color: whiteclr), ), ], ), SizedBox( height: screenSize.height * 0.009, ), Row( children: [ //Container for decoration Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular( 12), color: const Color( 0xff40404B)), height: screenSize.height * 0.045, width: screenSize.width * 0.2, child: const Center( child: Text( "Fastfood", style: TextStyle( fontWeight: FontWeight.w500, color: whiteclr), ), ), ), SizedBox( width: screenSize.width * 0.025, ), //Container for decoration Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular( 12), color: const Color( 0xff40404B)), height: screenSize.height * 0.045, width: screenSize.width * 0.2, child: const Center( child: Text( "Chicken", style: TextStyle( fontWeight: FontWeight.w500, color: whiteclr), ), ), ), SizedBox( width: screenSize.width * 0.025, ), //Container for decoration Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular( 12), color: const Color( 0xff40404B)), height: screenSize.height * 0.045, width: screenSize.width * 0.12, child: const Center( child: Text( "Fries", style: TextStyle( fontWeight: FontWeight.w500, color: whiteclr), ), ), ), ], ), ], ), ), ], ), ), ), //Positioned for placing favorite icon at top right of the item box const Positioned( right: 0, child: Padding( padding: EdgeInsets.all(6.0), child: Icon( Icons.favorite_rounded, size: 25, color: whiteclr, )), ) ], ), ); }), 8 
Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( height: sc.height * 0.010, ), Text( widget.details.name2, style: const TextStyle( fontSize: 21.5, fontWeight: FontWeight.bold, color: whiteclr), ), SizedBox( height: sc.height * 0.010, ), Row( children: [ const Icon( Icons.star, color: Color(0xffFCD506), size: 16, ), Text( widget.details.ratting, style: const TextStyle(fontSize: 12.5, color: whiteclr), ), ], ), SizedBox( height: sc.height * 0.01, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( widget.details.price, style: const TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: whiteclr), ), Row( children: [ Container( height: sc.height * 0.050, width: sc.width * 0.08, decoration: const BoxDecoration( color: lbackgroundclr, shape: BoxShape.circle), child: const Center( child: Icon( Icons.remove, color: whiteclr, ), ), ), SizedBox( width: sc.width * 0.04, ), const Text( "1", style: TextStyle( fontSize: 22, color: whiteclr, fontWeight: FontWeight.bold), ), SizedBox( width: sc.width * 0.04, ), Container( height: sc.height * 0.050, width: sc.width * 0.08, decoration: const BoxDecoration( color: lbackgroundclr, shape: BoxShape.circle), child: const Center( child: Icon( Icons.add, color: whiteclr, )), ) ], ) ], ), SizedBox( height: sc.height * 0.006, ), Text( widget.details.description, style: TextStyle( fontSize: 15, color: Colors.grey[400], ), ), 8 
Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Container( height: sc.height * 0.080, width: sc.width * 0.15, decoration: const BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: AssetImage("assets/creamcheese.png"), ), color: Color(0xff3A3843), shape: BoxShape.circle), ), SizedBox( width: sc.width * 0.03, ), const Text( "Cream Cheese", style: TextStyle( color: whiteclr, fontSize: 16, fontWeight: FontWeight.w500), ), SizedBox( width: sc.width * 0.22, ), Row( children: [ const Text( "\$${10}", style: TextStyle(color: whiteclr, fontSize: 16), ), Radio( value: 1, groupValue: _value, onChanged: (int? value) { setState(() { _value = value!; }); }), ], ), ], ), SizedBox( height: sc.height * 0.015, ), Row( children: [ Container( height: sc.height * 0.080, width: sc.width * 0.15, decoration: const BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: AssetImage("assets/avocado.png"), ), color: Color(0xff3A3843), shape: BoxShape.circle), ), SizedBox( width: sc.width * 0.03, ), const Text( "Avocado", style: TextStyle( color: whiteclr, fontSize: 16, fontWeight: FontWeight.w500), ), SizedBox( width: sc.width * 0.328, ), Row( children: [ const Text( "\$${11}", style: TextStyle(color: whiteclr, fontSize: 16), ), Radio( value: 2, groupValue: _value, onChanged: (int? value) { setState(() { _value = value!; }); }), ], ), ], ), SizedBox( height: sc.height * 0.015, ), Row( children: [ Container( height: sc.height * 0.080, width: sc.width * 0.15, decoration: const BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: NetworkImage( "https://upload.wikimedia.org/wikipedia/commons/9/9d/Tomato.png"), ), color: Color(0xff3A3843), shape: BoxShape.circle), ), SizedBox( width: sc.width * 0.0305, ), const Text( "Tomato", style: TextStyle( color: whiteclr, fontSize: 16, fontWeight: FontWeight.w500), ), SizedBox( width: sc.width * 0.35, ), Row( children: [ const Text( "\$${13}", style: TextStyle(color: whiteclr, fontSize: 16), ), Radio( value: 3, groupValue: _value, onChanged: (int? value) { setState(() { _value = value!; }); }), ], ), ], ), SizedBox( height: sc.height * 0.015, ), ] ) 8 
Center( child: Container( height: sc.height * 0.06, width: sc.width * 0.75, decoration: BoxDecoration( color: primaryclr, borderRadius: BorderRadius.circular(12), ), child: const Center( child: Text( "Add to card", style: TextStyle( fontSize: 15, color: whiteclr, ), ), ), ), ),