AppBar mungkin bisa disinonimkan dengan tag <header> pada HTML, sebab AppBar merupakan fungsi untuk membuat head dari sebuah aplikasi, dimana didalamnya terdapat title yang dapat digunakan untuk menampilkan brand atau page apa yang sedang dibuka dari aplikasi tersebut.lib/main.dart, hapus semua code yang ada karena kita akan memulainya dari awal. Kemudian masukkan code berikut:import 'package:flutter/material.dart';
void main() {
runApp(HomePage());
}
class HomePage extends StatelessWidget {
build(context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.red[800],
leading: Icon(Icons.home),
title: Text('DW Flutter Basic')
),
)
);
}
}material.dart. main() adalah fungsi yang pertama kali diajalankan ketika aplikasi sedang di-load, maka apapun yang di-apit didalam main() maka code tersebut akan di-eksekusi.runApp untuk me-render code kedalam screen aplikasi, dalam hal ini terdapat class HomePage() yang akan di-eksekusi.HomePage.MaterialApp dari package yang telah di-import pada awal code.MaterialApp memiliki property home yang berisi Scaffold widget. Perlu diketahui bahwa Scaffold widget inilah yang memiliki property appBar untuk membuat bar dari sebuah aplikasi, selain appBar, widget ini juga memiliki property lainnya, yakni: BottomAppBar, FloatingActionButton, dan lain sebagainya.appBar dari Scaffold berisi AppBar widget.AppBar widget juga memiliki banyak property, diantaranya: title, leading, actions, dan lain sebagainya. Tapi dalam case kali ini kita akan menggunakan property title yang berisi Text widget untuk menampilkan teks yang di-inginkan, leading untuk menampilkan icon home tepat sebelum teks dari title ditampilkan dan backgroundColor untuk memberikan warna pada AppBar.flutter run, maka hasil yang akan diperoleh akan tampak seperti berikut.
Scaffold memiliki property yang bernama body, dengan property ini kita dapat menempatkan object apapun yang ingin ditampilkan pada bagian content sebuah aplikasi.body. Masih di dalam file main.dart, modifikasi menjadi:import 'package:flutter/material.dart';
void main() {
runApp(HomePage());
}
class HomePage extends StatelessWidget {
build(context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.red[800],
leading: Icon(Icons.home),
title: Text('DW Flutter Basic')
),
//CODE BARU YANG DITAMBAHKAN
body: Container(
child: Card(
child: Column(
children: [
Image.network('https://flutter.io/images/homepage/header-illustration.png'),
Text('Belajar Flutter')
]
)
),
)
//AKHIR CODE
)
);
}
}
body memiliki value sebuah widget Container() dimana hal ini serupa dengan class container yang ada pada Bootstrap.Container juga memiliki property child , dimana pada case ini kita sematkan widget Card(). Sebenarnya bebas saja, jika kita ingin secara langsung menempatkan widget Column atau widget apapun didalam property child dari Container, tidak akan terjadi masalah. Hanya saja, case yang di-inginkan adalah membungkus object yang akan ditampilkan dengan Card(), dalam hal ini adalah Image dan Text.Column() dalam child dari Card, tujuannya agar dapat memanggil lebih dari satu class. Sebab property child hanya mampu menampung satu class saja. Sedangkan Column() memiliki property children yang mampu menampung lebih dari satu class / widget didalamnya.children dari Column() menggunakan lebih dari satu class, dimana masing-masing widget yang digunakan dipisahkan dengan koma (,). Maka dalam hal ini kita menggunakan widget Image.network() untuk mengambil image dari url. Dan Text(), seperti sebelumnya untuk menampilkan sebuah teks.
Row() & Column() dapat digunakan untuk mengatur posisi dari widget yang akan ditampilkan. Row sendiri berarti baris, maka apapun yang diapit oleh class ini akan menggunakan posisi baris atau berderet kesamping (Horizontal). Sedang Column berarti kolom, maka widgetyang berada didalamnya akan tersusun kebawah (Vertical).main.dart, modifikasi menjadi:import 'package:flutter/material.dart';
void main() {
runApp(HomePage());
}
class HomePage extends StatelessWidget {
build(context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.red[800],
leading: Icon(Icons.home),
title: Text('DW Flutter Basic')
),
//YANG DIMODIFIKASI
body: Container(
margin: EdgeInsets.all(10.0), //CODE BARU UNTUK MENGATUR MARGIN
child: Column(
children: [
Row(
children: [
Icon(Icons.archive),
Text('Artikel Terbaru', style: new TextStyle(fontWeight: FontWeight.bold))
]
),
Card(
child: Column(
children: [
Image.network('https://flutter.io/images/homepage/header-illustration.png'),
Text('Belajar Flutter')
]
),
),
]
)
)
)
);
}
} child dari Container terdapat class Column(), dimana children dari Column() terbagi menjadi dua bagian, yakni: Row() dan Card(). Dapat disimpulkan, bahwa kedua objek tersebut akan membentuk kolom (vertical), sehingga apapun yang berada didalam Row() akan diletakkan diatas dan apapun yang berada didalam Card() akan diletakkan setelah objek dari Row di-render.children, dimana didalamnya terdapat dua buah objek, yakni: Icon & Text. Maka Icon dan Text ini akan di-render secara horizontal.child yang menggunakan class Column(). children dari Column terdapat dua buah objek yakni: Image dan Text.
git dan dapat digunakan melalui command line.
/home/usersaya/flutter atau ~/flutter .
$ cd ~/flutter
$ export PATH=`pwd`/bin:$PATHflutter_console.bat berada di dalam folder flutter, kemudian double click file tersebut.flutter doctor untuk mengecek apakah masih ada dependecies yang belum ter-install.
flutter devices atau bisa juga dengan menggunakan command: flutter doctor untuk mengecek apakah perangkat sudah terhubung atau tidak.
ANDROID_HOME, jika kamu pengguna linux, tambahkan command berikut ke dalam file .bashrc atau .profile:export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-toolsflutter. Kemudian pilih Flutter, lalu tekan install.
Dart plugin juga, pada gambar lokasinya terletak paling bawah.Flutter: Run Flutter Doctor. Pastikan output yang kamu terima sama dengan ketika menjalankan command flutter doctor pada terminal.
]]></b:skin>.quickedit{display:none;}<b:include name='quickedit'/>/b:include>
