Pemrograman Mobile Programming

Advanced Layout Application

In this section, let us learn how to create a complex user interface of product listing with
custom design using both single and multiple child layout widgets.
For this purpose, follow the sequence given below:
 Create a new Flutter application in Android studio, store_app.
 Replace the main.dart code with folowing code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,

),
home: MyHomePage(title: 'Product layout demo home page'),
);
}
}

 Here, We have created MyHomePage widget by extending StatelessWidget instead

of default StatefulWidget and then removed the relevant code.
 Now, create a new widget, ProductBox according to the specified design as shown
below:

The code for the ProductBox is as follows:

class ProductBox extends StatelessWidget {
ProductBox({Key? key, this.name ='', this.description = '', this.price = 0,
this.image = ''})
: super(key: key);
final String name;
final String description;
final int price;
final String image;
Widget build(BuildContext context) {
return Container(

1|Page Muhammad Irvan

Pemrograman Mobile Programming

padding: EdgeInsets.all(2),
height: 120,
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset("assets/appimages/" + image),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(this.name,
style: TextStyle(fontWeight:
FontWeight.bold)),
Text(this.description),
Text("Price: " + this.price.toString()),
],
)))
])));
}
}
 Please observe the following in the code:
o ProductBox has used four arguments as specified below:
 name - Product name
 description - Product description
 price - Price of the product
 image - Image of the product
o ProductBox uses seven build-in widgets as specified below:
 Container
 Expanded
 Row
 Column
 Card
 Text
 ProductBox is designed using the above mentioned widget. The arrangement or
hierarchy of the widget is specified in the diagram shown below:

2|Page Muhammad Irvan

Pemrograman Mobile Programming

 Now, place some dummy image (see below) for product information in the assets
folder of the application and configure the assets folder in the pubspec.yaml file as
shown below:

Definition images in pubspec.yaml

 Finally, Use the ProductBox widget in the MyHomePage widget as specified below:

3|Page Muhammad Irvan

Pemrograman Mobile Programming

class MyHomePage extends StatelessWidget {

MyHomePage({
Key? key, this.title = ''}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Product Listing")),
body: ListView(
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
children: <Widget>[
ProductBox(
name: "iPhone",
description: "iPhone is the stylist phone ever",
price: 1000,
image: "iPhone.jpg"),
ProductBox(
name: "Pixel",
description: "Pixel is the most featureful phone ever",
price: 800,
image: "pixel.png"),
ProductBox(
name: "Laptop",
description: "Laptop is most productive development tool",
price: 2000,
image: "laptop.jpg"),
ProductBox(
name: "Tablet",
description: "Tablet is the most useful device ever for
meeting",
price: 1500,
image: "tablet.jpg"),

ProductBox(
name: "Floppy Drive",
description: "Floppy drive is useful rescue storage
medium",
price: 20,
image: "floppy.jpg"),
],
));
}
}
Here,we have used ProductBox as children of ListView widget.
 The complete code (main.dart) of the product layout application (store_app) is as
follows:
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(

4|Page Muhammad Irvan

Pemrograman Mobile Programming

primarySwatch: Colors.blue,

),
home: MyHomePage(title: 'Product layout demo home page'),
);
}
}

class MyHomePage extends StatelessWidget {

MyHomePage({
Key? key, this.title = ''}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Product Listing")),
body: ListView(
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
children: <Widget>[
ProductBox(
name: "iPhone",
description: "iPhone is the stylist phone ever",
price: 1000,
image: "iPhone.jpg"),
ProductBox(
name: "Pixel",
description: "Pixel is the most featureful phone ever",
price: 800,
image: "pixel.png"),
ProductBox(
name: "Laptop",
description: "Laptop is most productive development tool",
price: 2000,
image: "laptop.jpg"),
ProductBox(
name: "Tablet",
description: "Tablet is the most useful device ever for
meeting",
price: 1500,
image: "tablet.jpg"),

ProductBox(
name: "Floppy Drive",
description: "Floppy drive is useful rescue storage
medium",
price: 20,
image: "floppy.jpg"),
],
));
}
}

class ProductBox extends StatelessWidget {

ProductBox({Key? key, this.name ='', this.description = '', this.price =
0, this.image = ''})
: super(key: key);
final String name;
final String description;

5|Page Muhammad Irvan

Pemrograman Mobile Programming

final int price;

final String image;
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(2),
height: 120,
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset("assets/appimages/" + image),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(this.name,
style: TextStyle(fontWeight:
FontWeight.bold)),
Text(this.description),
Text("Price: " + this.price.toString()),
],
)))
])));
}
}

 Here, output of application

6|Page Muhammad Irvan

Pemrograman Mobile Programming

Tugas :
- Buatlah sebuah aplikasi untuk membuat list pemain film dengan Tampilan seperti
aplikasi store_app di atas. Dengan keterangan nama pemain film tersebut, film yang
sudah pernah di mainkan, usia.
- Kirimkan file project dan dokumentasi ke email :
[email protected]
- Tugas boleh di kerjakan berkelompok – max 2 orang.

7|Page Muhammad Irvan