{"id":1989,"date":"2022-04-07T07:06:24","date_gmt":"2022-04-07T07:06:24","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=1989"},"modified":"2022-04-07T07:06:24","modified_gmt":"2022-04-07T07:06:24","slug":"building-complex-layout","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/building-complex-layout\/","title":{"rendered":"Building Complex Layout"},"content":{"rendered":"\n

In this section, we are going to learn how you can create a complex user interface using both single and multiple child layout widgets. The layout framework allows you to create a complex user interface layout by nesting the rows and columns inside of rows and columns.<\/p>\n\n\n\n

Let us see an example of a complex user interface by creating the product list<\/strong>. For this purpose, you need first to replace the code of main.dart<\/strong> file with the following code snippet.<\/a><\/a><\/a><\/p>\n\n\n\n

import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  \/\/ It is the root widget of your application.  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      title: 'Flutter Demo Application', theme: ThemeData(  \n      primarySwatch: Colors.green,),  \n      home: MyHomePage(title: 'Complex layout example'),  \n    );  \n  }  \n}  \nclass MyHomePage extends StatelessWidget {  \n  MyHomePage({Key key, this.title}) : super(key: key);  \n  final String title;  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n        appBar: AppBar(title: Text(\"Product List\")),  \n        body: ListView(  \n          padding: const EdgeInsets.fromLTRB(3.0, 12.0, 3.0, 12.0),  \n          children: <Widget>[  \n            ProductBox(  \n                name: \"iPhone\",  \n                description: \"iPhone is the top branded phone ever\",  \n                price: 55000,  \n                image: \"iphone.png\"  \n            ),  \n            ProductBox(  \n                name: \"Android\",  \n                description: \"Android is a very stylish phone\",  \n                price: 10000,  \n                image: \"android.png\"  \n            ),  \n            ProductBox(  \n                name: \"Tablet\",  \n                description: \"Tablet is a popular device for official meetings\",  \n                price: 25000,  \n                image: \"tablet.png\"  \n            ),  \n            ProductBox(  \n                name: \"Laptop\",  \n                description: \"Laptop is most famous electronic device\",  \n                price: 35000,  \n                image: \"laptop.png\"  \n            ),  \n            ProductBox(  \n                name: \"Desktop\",  \n                description: \"Desktop is most popular for regular use\",  \n                price: 10000,  \n                image: \"computer.png\"  \n            ),  \n          ],  \n        )  \n    );  \n  }  \n}  \nclass ProductBox extends StatelessWidget {  \n  ProductBox({Key key, this.name, this.description, this.price, this.image}) :  \n        super(key: key);  \n  final String name;  \n  final String description;  \n  final int price;  \n  final String image;  \n  \n  Widget build(BuildContext context) {  \n    return Container(  \n        padding: EdgeInsets.all(2),  \n        height: 110,  \n        child: Card(  \n            child: Row(  \n                mainAxisAlignment: MainAxisAlignment.spaceEvenly,  \n                children: <Widget>[  \n                  Image.asset(\"assets\/\" + image),  \n                  Expanded(  \n                      child: Container(  \n                          padding: EdgeInsets.all(5),  \n                          child: Column(  \n                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,  \n                            children: <Widget>[  \n                              Text(  \n                                  this.name, style: TextStyle(  \n                                  fontWeight: FontWeight.bold  \n                              )  \n                              ),  \n                              Text(this.description), Text(  \n                                  \"Price: \" + this.price.toString()  \n                              ),  \n                            ],  \n                          )  \n                      )  \n                  )  \n                ]  \n            )  \n        )  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n
In the above code, we create widget ProductBox<\/strong> that contains the details of the product, such as image, name, price, and description. In the ProductBox widget, we use the following child widgets: Container, Row, Column, Expanded, Card, Text, Image, etc. This widget contains the following layout:<\/p>\n\n\n\n
\"Flutter<\/figure>\n\n\n\n
Output<\/strong><\/p>\n\n\n\n
Now, when we run the dart file in the android emulator, it will give the following output.<\/p>\n\n\n\n
\"Flutter<\/figure>\n","protected":false},"excerpt":{"rendered":"
In this section, we are going to learn how you can create a complex user interface using both single and multiple child layout widgets. The layout framework allows you to create a complex user interface layout by nesting the rows and columns inside of rows and columns. Let us see an example of a complex […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[675],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/1989"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=1989"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/1989\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=1989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=1989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=1989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}