- pengenalan kepada mobile platform (slide)
- apa itu flutter framework
- pemasangan persekitaran flutter, android sdk & vscode ide
- widget layout & ui element
latihan 1
menghasilkan projek flutter dengan penerangan kerangka asas flutter
- statelesswidget
- materialapp
- scaffold
statelesswidget
import 'package:flutter/material.dart';
void main() => runapp(myapp());
class myapp extends statelesswidget {
@override
widget build(buildcontext context) {
return materialapp(
title: 'material app',
home: scaffold(
appbar: appbar(
title: text('material app bar'),
),
body: center(
child: container(
child: text('hello world'),
),
),
),
);
}
}
statefulwidget
import 'package:flutter/material.dart';
void main() => runapp(myapp());
class myapp extends statefulwidget {
@override
state<myapp> createstate() => _myappstate();
}
class _myappstate extends state<myapp> {
@override
widget build(buildcontext context) {
return materialapp(
title: 'material app',
home: scaffold(
appbar: appbar(
title: text('material app bar'),
),
body: center(
child: container(
child: text('hello world'),
),
),
),
);
}
}
latihan 1 : flutter_application_1
latihan 2
merangka layout berasaskan column dan row bagi membentuk satu susunan layout yang dikehendaki didalam antaramuka aplikasi
- statelesswidget
- materialapp
- scaffold
- widget column and children
- widget row and children
- widget container and child
latihan 2 : flutter_application_2
latihan 3
melengkapkan layout column dan row dengan kandungan seperti widget text & image untuk menghasilkan aplikasi lebih menarik
mewujudkan fail home.dart yang berasingan bagi penyusunan struktur projek
- widget column and children
- widget row and children
- widget container and child
- widget center
- widget text
- widget image
- dependencies : images
- navigator push and pop
double? width
mediaquery.of(context).size.width
double? height
mediaquery.of(context).size.height
latihan 4 : flutter_application_3
latihan 4
mewujudkan fail show.dart untu memaparkan butiran dari home.dart
- dependencies : fonts
fontfamily: 'bubblegum'
- navigator push and pop
- widget inkwell
- data model
- listview builder
- ui element
listtile()
custom widget : klikgambarwidget()
class klikgambarwidget extends statelesswidget {
klikgambarwidget({
key? key,
required this.title,
required this.nama,
}) : super(key: key);
string title;
string nama;
@override
widget build(buildcontext context) {
return inkwell(
ontap: () {
navigator.push(
context,
materialpageroute(
builder: (context) => showpage(gambar: nama, title: title)));
},
child: container(
height: 100,
width: mediaquery.of(context).size.width * 0.25,
decoration: boxdecoration(
image: decorationimage(
image: assetimage('images/$nama'), fit: boxfit.cover)),
),
);
}
}
data models
class gambar {
string gambar;
string tajuk;
gambar({required this.gambar, required this.tajuk});
}
data list
list<gambar> semua = [
gambar(gambar: 'avatar/avatar1.png', tajuk: 'avatar 1'),
gambar(gambar: 'avatar/avatar2.png', tajuk: 'avatar 2'),
gambar(gambar: 'avatar/avatar3.png', tajuk: 'avatar 3'),
gambar(gambar: 'avatar/avatar4.png', tajuk: 'avatar 4'),
gambar(gambar: 'avatar/avatar5.png', tajuk: 'avatar 5'),
];
latihan 4 : flutter_application_4
latihan 5
membina drawer() (side bar) dan simpan sebagai widgets/menu.dart
import 'package:flutter/material.dart';
import 'package:flutter_application_4/pages/home.dart';
import 'package:flutter_application_4/pages/list.dart';
import 'package:flutter_application_4/pages/listdata.dart';
class menuwidget extends statelesswidget {
const menuwidget({
key? key,
}) : super(key: key);
@override
widget build(buildcontext context) {
return drawer(
child: listview(
children: [
container(
padding: edgeinsets.symmetric(horizontal: 5.0),
width: mediaquery.of(context).size.width,
height: 80,
alignment: alignment.centerright,
decoration: boxdecoration(
image: decorationimage(
image: assetimage('images/fruit/fruit_main.jpg'),
fit: boxfit.cover)),
child: const text('fruit app',
style: textstyle(
color: colors.white,
fontsize: 24,
letterspacing: 3.5,
fontweight: fontweight.bold,
fontfamily: 'bubblegum')),
),
listtile(
leading: icon(icons.home),
title: text('home'),
ontap: () {
//navigator
navigator.push(
context, materialpageroute(builder: (context) => home()));
},
),
listtile(
leading: icon(icons.favorite),
title: text('my fruit'),
ontap: () {
//navigator
navigator.push(
context, materialpageroute(builder: (context) => listpage()));
},
),
listtile(
leading: icon(icons.batch_prediction),
title: text('fruit data'),
ontap: () {
//navigator
navigator.push(context,
materialpageroute(builder: (context) => listdatapage()));
},
),
],
),
);
}
}
menghasilkan appbar action button utk loginpage()
- widget form()
- widget textformfield()
- widget elevatedbutton()
mengubah app icon launcher menggunakan plugin https://pub.dev/packages/flutter_launcher_icons
flutter_launcher_icons: ^0.9.2
flutter_icons:
android: "launcher_icon"
ios: true
image_path: "images/icon/logo.png"
flutter pub run flutter_launcher_icons:main
in the above configuration, the package is setup to replace the existing launcher icons
menghasilkan apk dengan cli flutter build apk
latihan 5 : flutter_application_5
Comments are closed.