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
