Bab 9

User Interface (Bag. 1)

Bab ini membahas tentang konsep-konsep yang perlu dipahami ketika merancang tampilan layar
(user interface), seperti perbedaan antara kelas StatelessWidget dan StatefulWidgdet, pembuatan
tampilan dinamis menggunakan kelas StatefulWidget, pengaturan tata-letak komponen di layar,
dan pengaturan jarak antar-komponen.

Kelas StatelessWidget dan StatefulWidget

Dalam Flutter, komponen dibedakan menjadi dua jenis, yaitu komponen dengan sifat stateless dan
stateful. Komponen dengan sifat stateless adalah kelas yang diturunkan dari kelas
StatelessWidget, sedangkan komponen dengan sifat stateful adalah kelas yang diturunkan dari
kelas StatefulWidget. Pemahaman tentang perbedaan dari kedua jenis komponen ini merupakan
hal yang sangat penting ketika bekerja dengan Flutter. Dengan memahami konsep ini, kita dapat
menentukan jenis komponen yang sesuai dengan kebutuhan aplikasi yang akan kita buat.

Untuk memahami komponen dengan sifat stateless dan stateful, mula-mula kita harus mengetahui
tentang state. Dalam Flutter, state dinyatakan sebagai informasi yang dapat dibaca ketika suatu
komponen dibuat dan mungkin akan mengalami perubahan keadaan selama komponen tersebut
tampil di layar.

Komponen stateless adalah komponen yang tidak memiliki state dan digunakan untuk membuat
tampilan yang sifatnya statis (tidak berubah). Text, RaisedButton, dan Icon adalah contoh
komponen-komponen yang bersifat stateless.

Komponen stateful adalah komponen yang dilengkapi dengan state. Komponen ini digunakan
untuk membuat tampilan yang dapat menampung masukan dari pengguna aplikasi. Checkbox,
Radio, TextField, dan Slider adalah contoh komponen yang bcrsifat stateful. Sebagai contoh,
ketika pengguna aplikasi menekan komponen Checkbox yang ada di Jayar, maka keadaan (state
dari komponen terscbut akan berubah, misalnya dari kcadaan dipilih (checked, menjadi tidak
dipilih (unchecked) atau sebaliknya, Ketika terjadi perubahan keadaan, aplikasi akan mcnggambar
ulang komponen bersangkutan dengan tampilan yang baru.

Perbedaan-perbedaan dari kedua jenis komponen di atas dapat dilihat pada tabel di bawah ini.

Kelas Turunan dari StatelessWidget Kelas Turunan dari StatefulWidget

Tidak memiliki state dan pengguna aplikasi Pengguna dapat berinteraksi dengan
tidak dapat berinteraksi secara langsung komponen, untuk mengubah nilai yang
dengan komponen. terdapat di dalam komponen bersangkutan.
 Melakukan override (modifikasi) terhadap Melakukan override (modifikasi) terhadap
metode build() dan mengembalikan objek metode createState() dan mengembalikan
bertipe Widget. objek bertipe State.
Digunakan untuk membuat tampilan statis. Digunakan untuk membuat tampilan dinamis.
- Ketika state (keadaan) pada suatu komponen
berubah, maka objek akan memanggil metode
setState( ) untuk menggambar ulang tampilan
baru.

Menggunakan Kelas Statefulwidget

Untuk membuat aplikasi dengan tampilan layar yang bersifat dinamis, kita perlu mendefinisikan
dua kelas. Kelas pertama diturunkan dari kelas StatefulWidget dan kelas kedua diturunkan dari
kelas generik states

Dalam kelas pertama kita perlu melakukan modifikasi (override) terhadap metode createState().
Metode ini bertugas untuk membuat objek dari kelas kedua dan mengembalikan objek tersebut
sebagai hasil metode.

class Home extends StatefulWidget {

// . . .
HomeState createState() {
return HomeState();
}
}

atau

class Home extends StatefulWidget {

// . . .

@override
HomeState createState() => HomeState();
}

pada contoh di atas, HomeState adalah nama kelas kedua. Dalam kelas kedua, kita perlu
melakukan override terhadap metode build ( ) untuk membangun tampilan layar menggunakan
komponen-komponen tertentu, seperti berikut:

class Home extends State<Home> {

 // . . .

@override
Widget build(BuildContext context) {
// . . .
}
}

Contoh di bawah ini akan menunjukkan konsep dasar pembuatan aplikasi yang memiliki layar
dinamis.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}

class Home extends StatefulWidget {

@override
HomeState createState() => HomeState();
}

class HomeState extends State<Home> {

int counter = 0;
void incrementCounter() {
setState(() {
counter++;
});
}

void decrementCounter() {
setState(() {
counter--;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo StatefulWidget'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Nilai Counter : $counter',
style: TextStyle(fontSize: 30.0),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('<<'),
onPressed: decrementCounter,
),
Container(
width: 10.0,
),
 RaisedButton(
child: Text('>>'),
onPressed: incrementCounter,
),
],
)
],
),
),
);
}
}

Hasil yang akan diberikan adalah sebagai berikut:

Pada contoh di atas kita menempatkan satu komponen Text dan dua komponen RaisedButton ke
dalam layar. Teks yang terdapat di dalam komponen Text akan berubah tergantung dari nilai
variabel counter. Untuk mengubah nilai variabel counter, kita mendefinisikan dua metode untuk
penanganan event onPressed dari objek RaisedButton pertama dan kedua.
 void incrementCounter() {
setState(() {
counter++;
});
}

void decrementCounter() {
setState(() {
counter--;
});
}

Untuk menghubungkan kedua metode di atas dengan event onPressed pada Objek RaisedButton
pertama dan kedua, gunakan kode berikut:

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('<<'),
onPressed: decrementCounter,
),
Container(
width: 10.0,
),
RaisedButton(
child: Text('>>'),
onPressed: incrementCounter,
),
],
)

Mengatur Tata-Letak Komponen

Flutter menyediakan beberapa kelas yang dapat dijadikan sebagai kontainer dan berfungsi untuk
mengatur tata-letak (layout) atau menyusun komponenkomponen yang terdapat di dalam layar.
Kelas-kelas yang umum digunakan untukkeperluan tersebut adalah Row, Column, ListView, dan
GridView. Setiap kelas akan menyusun komponen-komponen yang terdapat di dalamnya dengan
susunan yang berbeda. Pada sub-bab ini kita hanya akan membahas tentang penyusunan
komponen-komponen layar menggunakan kelas Row dan Column. Penggunaan kelas ListView
dan GridView akan dibahas secara terpisah pada bab berikutnya.

Menggunakan Kelas Row

Kelas Row akan menyusun komponen-komponen yang terdapat di dalamnya dengan susunan
horisontal. Gambar di bawah ini menunjukkan karakteristik kontainer dengan tipe Row.

Komponen 1 Komponen 2 Komponen 3 Komponen 4

kontainer

Untuk memasukkan komponen-komponen ke dalam kontainer dengan tipe Row, gunakan kode
berikut:

Row(
children: <Widget>[
//Komponen 1,
//Komponen 2,
//Komponen 3,
//. . .
],
);

contoh aplikasi di bawah ini akan menunjukkan penggunaan kelas Row.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
 ),
home: Home(),
);
}
}

class Home extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo Row'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Button 1'),
onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 2'),
onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 3'),
onPressed: () {},
),
Container(
 width: 10,
),
RaisedButton(
child: Text('Button 4'),
onPressed: () {},
),
],
),
),
);
}
}

Hasil yang akan diberikan adalah sebagai berikut:

Pada contoh di atas kita menempatkan empat komponen RaisedButton ke dalam kontainer. Agar
keempat komponen tersebut tidak saling menempel kita dapat menyisipkan komponen Container
untuk menentukan jarak.

children: <Widget>[
RaisedButton(
child: Text('Button 1'),
 onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 2'),
onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 3'),
onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 4'),
onPressed: () {},
),
],

Properti mainAxisAlignment pada kelas Row berfungsi untuk menentukan posisi komponen-
komponen pada saat ditampilkan ke layar. MainAxisAlignment.center akan menyebabkan
kontainer ditampilkan di posisi tengah (untuk arah horisontal).

mainAxisAlignment: MainAxisAlignment.center,

Selain MainAxisA1ignment.center, kita dapat menggunakan nilai MainAxisAlignment.start atau

MainAxisA1ignment. end untuk properti mainAxisAlignment. Jika posisi kontainer ingin diatur
untuk arah vertikal, gunakan properti crossAxisAlignment. Gambar di bawah ini menunjukkan
perbedaan antara properti mainAxisAlignment dan crossAxisAlignment untuk kontainer yang
dibuat menggunakan kelas Row.
Menggunakan Kelas Column
Kelas Column berfungsi untuk menyusun komponen-komponen yang terdapat di dalamnya
dengan susunan vertikal. Gambar di bawah ini menunjukkan karakteristik kontainer dengan tipe
Column.

Komponen 1

Komponen 2 Kontainer

Komponen 3

Komponen 4

Untuk memasukkan komponen-komponen ke dalam kontainer dengan Column, gunakan kode

berikut:
 Column(
children: <Widget>[
//Komponen 1,
//Komponen 2,
//Komponen 3,
//. . .
]
);

Contoh aplikasi di bawah ini akan menunjukkan penggunaan kelas Column

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}

class Home extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo Column'),
),
body: Center(
 child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Button 1'),
onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 2'),
onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 3'),
onPressed: () {},
),
Container(
width: 10,
),
RaisedButton(
child: Text('Button 4'),
onPressed: () {},
),
],
),
),
);
}
}
Hasil yang akan diberikan adalah sebagai berikut:

Perilaku properti mainAxisA1ignment dan crossAxisAlignmen pada kelas column berbeda dengan
kelas Row. Pada kelas Column, mainAxisAlignment berfungsi untuk mengatur posisi kontainer
secar vertikal, sedangkan crossAxisA1ignment berfungsi untuk mengatu posisi kontainer secara
horisontal. Gambar di bawah ini menunjukkan cara kerja kedua properti tersebut ketika diterapkan
pada kontainer yang dibuat menggunakan kelas Column.
Memadukan Kelas Row dan Column
Pada kasus-kasus nyata dalam pembuatan aplikasi mobile, susunan komponen komponen yang
terdapat di dalam layar biasanya dibuat dengan memadukan penggunaan kelas Row dan Column.
Dalam satu kontainer Row bisa terdapat beberapa kontainer Column, seperti yang ditunjukkan
oleh contoh kode berikut :

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Button 1'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 2'),
 onPressed: () {},
),
],
),
Container(
width: 10.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Button 3'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 4'),
onPressed: () {},
),
],
),
Container(
width: 10.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Button 5'),
onPressed: () {},
),
RaisedButton(
child: Text('Button 6'),
onPressed: () {},
),
],
),
 ],
),

Kode di atas akan membentuk susunan komponen seperti berikut:

Satu kontainer Column juga dapat memiliki beberapa kontainer Row, seperti berikut:

Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Button 1'),
onPressed: () {},
),
Container(
width: 10.0,
),
RaisedButton(
child: Text('Button 2'),
onPressed: () {},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
 child: Text('Button 3'),
onPressed: () {},
),
Container(
width: 10.0,
),
RaisedButton(
child: Text('Button 4'),
onPressed: () {},
),
],
),
Container(
width: 10.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Button 5'),
onPressed: () {},
),
Container(
width: 10.0,
),
RaisedButton(
child: Text('Button 6'),
onPressed: () {},
),
],
),
],
),

Kali ini, susunan komponen yang akan terbentuk adalah:

contoh aplikasi di bawah ini menunjukkan penyusunan komponen komponen di dalam layar
menggunakan kelas Row dan Column. Pada aplikasi ini kita akan menggunakan gambar. Untuk
keperluan ini, siapkan file gambar dan tempatkan di dalam direktori nama-aplikasi/images. Dalam
file pubspec.yaml, ubah kode pada bagian assets, misalnya seperti berikut:

# To add assets to your application, add an assets section, li

ke this:
assets:
- images/menarapandang.jpg
# - images/a_dot_ham.jpeg

kemudian isikan kode berikut ke dalam file nama-aplikasi/lib/main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}

class Home extends StatelessWidget {

final String title = 'Menara Pandang Banjarmasin';
final String location = 'Banjarmasin, Kalimantan Selatan';
final String description = '''
Menara Pandang merupakan salah satu destinasi wisata yang menja
di ikon atau ciri khas kota Banjarmasin. Destinasi wisata ini b
isa dibilang cukup baru karena baru diresmikan pada tahun 2014.
Tempat wisata ini sangat cocok didatangi bersama teman dan kel
uarga.''';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Objek Wisata'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Image.asset(
'images/menarapandang.jpg',
height: 250.0,
width: 412.0,
fit: BoxFit.fill,
),
Container(
width: 15.0,
),
Row(
children: <Widget>[
Container(
width: 15.0,
),
 Column(
crossAxisAlignment: CrossAxisAlignment.star
t,
children: <Widget>[
Text(this.title,
style: TextStyle(
fontSize: 20.0, fontWeight: FontW
eight.bold)),
Text(
this.location,
style: TextStyle(
fontSize: 16.0,
color: Colors.grey,
),
),
],
),
Container(
width: 130.0,
),
Icon(
Icons.star,
size: 32.0,
color: Colors.red,
),
Text('5', style: TextStyle(fontSize: 14.0)),
],
),
Container(
padding: EdgeInsets.all(15.0),
child: Text(
this.description,
style: TextStyle(
fontSize: 18.0,
),
softWrap: true,
 ),
),
],
),
));
}
}

hasilnya akan terlihat sebagai berikut :

Pada contoh di atas baris pertama layar diisi dengan gambar menggunakan kode berikut:

Image.asset(
'images/menarapandang.jpg',
height: 250.0,
width: 412.0,
fit: BoxFit.fill,
),
Baris kedua diisi dengan kontainer Row. Dalam baris ini kolom pertama diisi kontainer Column,
kolom kedua diisi dengan icon bintang, dan kolom ketiga diisi dengan teks ‘5’.

Row(
children: <Widget>[
Container(
width: 15.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(this.title,
style: TextStyle(
fontSize: 20.0, fontWeight: FontW
eight.bold)),
Text(
this.location,
style: TextStyle(
fontSize: 16.0,
color: Colors.grey,
),
),
],
),
Container(
width: 130.0,
),
Icon(
Icons.star,
size: 32.0,
color: Colors.red,
),
Text('5', style: TextStyle(fontSize: 14.0)),
],
),
Baris terakhir diisi dengan deskripsi. Kodenya adalah sebagai berikut:

Container(
padding: EdgeInsets.all(15.0),
child: Text(
this.description,
style: TextStyle(
fontSize: 18.0,
),
softWrap: true,
),
),

Mengatur Jarak Komponen

ada Saat menyusun komponen-komponen yang terdapat di dalam suatu kontainer, kadang kita
membutuhkan jarak atau ruang kosong untuk memisahkan komponen satu dengan komponen lain.
Untuk menangani permasalahan ini, kita dapat memanfaatkan kelas Container, Container
digunakan untuk menambah margin, padding, dan dekorasi (seperti tebal bingkai dan warna latar),
Perhatikan contoh kode berikut:

Row(
children: <Widget>[
RaisedButton(
child: Text('Button 1'),
onPressed: null,
),
RaisedButton(
child: Text('Button 2'),
onPressed: null,
),
],
),

Kode di atas berfungsi untuk membuat dua komponen RaisedButton dan menampilkannya dengan
susunan horisontal. Ketika aplikasi dijalankam kedua komponen tersebut akan saling menempel.
Untuk membuat jarak antara Button 1 dan Button 2, kita dapat menyisipkan komponen Container
dengan lebar tertentu di antara kedua komponen tersebut, seperti berikut:
 Row(
children: <Widget>[
RaisedButton(
child: Text('Button 1'),
onPressed: null,
),
Container(
width: 15.0,
),
RaisedButton(
child: Text('Button 2'),
onPressed: null,
),
],
),

Dalam contoh ini, kita membuat komponen Container dengan properti width bernilai 15.0. Untuk
kontainer yang bertipe Column, jarak antar komponen dapat dibuat dengan mengisi nilai ke dalam
properti height, misalnya seperti berikut:

Column(
children: <Widget>[
RaisedButton(
child: Text('Button 1'),
onPressed: null,
),
Container(
hight: 15.0,
),
RaisedButton(
child: Text('Button 2'),
onPressed: null,
),
],
),
Selain properti width dan height, dua properti yang sering digunakan pada saat menggunakan
kelas Container adalah margin dan padding. Properti margin berfungsi untuk mengatur jarak
antara kontainer yang dibuat dengan komponen lain yang berada di atas atau di sebelahnya
(tergantung dari jenis layout yang digunakan), sedangkan padding berfungsi untuk mengatur jarak
antara tepi kontainer dengan komponen yang berada di dalam kontainer. Pada saat membuat
kontainer, kita juga dapat mengatur tebal bingkai kontainer menggunakan properti border yang
terdapat di dalam kelas BoxDecoration. Gambar di bawah ini menunjukkan perbedaan antara
properti margin dan padding pada kelas Container serta properti border pada kelas
BoxDecoration.

Metode EdgeInsets.all( )
Metode EdgeInsets.all( ) digunakan untuk mengatur margin maupun Padding di seluruh Sisi
kontainer (atas, kanan, bawah, dan kiri). Contoh aplikasi di bawah ini menunjukkan penggunaan
metode EdgeInsets.all( ) yang diisikan untuk properti margin dan padding pada kelas Container.

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: 'Demo Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}

class Home extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo EdgeInsets.all()'),
),
body: Row(
children: <Widget>[
Container(
color: Colors.lightBlue,
margin: const EdgeInsets.all(20.0),
padding: const EdgeInsets.all(5.0),
child: RaisedButton(child: Text('Button 1'), onPres
sed: () {}),
),
Container(
margin: const EdgeInsets.all(5.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(
width: 5.0,
color: Colors.red,
)),
 child: RaisedButton(child: Text('Button 2'), onPres
sed: () {}),
),
Container(
color: Colors.lightBlue,
margin: const EdgeInsets.all(20.0),
padding: const EdgeInsets.all(5.0),
child: RaisedButton(child: Text('Button 3'), onPres
sed: () {}),
),
],
),
);
}
}

hasilnya akan terlihat sebagai berikut :

Pada kode di atas kita membuat tiga objek dari kelas Container yang disusun secara horisontal.
Properti margin dan padding dari kontainer pertama sama dengan kontainer ketiga. Pada kontainer
kedua kita mengisi nilai berbeda untuk properti margin dan padding. Selain itu, kita juga membuat
bingkai untuk kontainer kedua. Cara yang diperlukan untuk membuat bingkai adalah sebagai
berikut:

decoration: BoxDecoration(
border: Border.all(
width: 5.0,
color: Colors.red,
)),

Metode EdgeInsets.only( )
Berbeda dengan EdgeInsets.all ( ) , metode EdgeInsets.only( ) digunakân jika kita hanya ingin
mengatur margin atau padding pada sisi-sisi tertentu saja, bisa atas, kanan, bawah, atau kiri, contoh
penggunaannya adalah sebagai berikut :

Container(
margin: const EdgeInsets.only(5.0),
padding: const EdgeInsets.only(10.0),
decoration: BoxDecoration(
border: Border.all(
width: 5.0,
color: Colors.red,
)),

Kode di atas mengatur margin atas dengan nilai 10.0 dan padding sebelah kiri dengan nilai 5,0.
Pada saat menggunakan metode kita dapat menggunakan parameter top, right, bottom, dan left.
jika semua parameter tersebut digunakan dan nilainya sama, maka EdgeInsets.only( ) akan
sama dengan EdgeInsets.all ( ), misalnya seperti berikut

EdgeInsets.only(top: 10.0, right: 10.0, bottom: 10.0, left: 10.

0)

Baris kode di atas sama saja dengan baris kode berikut:

EdgeInsets.all(10.0)

Berikut ini contoh lengkap yang menunjukkan penggunaan metode Edgelnsets.only().

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: 'Demo Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}

class Home extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo EdgeInsets.only()'),
),
body: Row(
children: <Widget>[
Container(
color: Colors.lightBlue,
margin: const EdgeInsets.only(top: 50.0),
padding: const EdgeInsets.only(left: 70.0, right: 1
0.0),
child: RaisedButton(child: Text('Button'), onPresse
d: () {}),
),
],
 ),
);
}
}

Hasil yang diberikan adalah sebagai berikut: