Text,
Container, Row, Column, dll.
Dart adalah bahasa pemrograman yang dikembangkan oleh Google dan digunakan dalam pengembangan aplikasi Flutter. Dart dirancang untuk sintaks yang bersih, mendukung pemrograman berorientasi objek, dan memiliki performa tinggi untuk aplikasi mobile dan web.
Karena ada library Flutter yang dibuat menggunakan bahasa C++, maka perlu menginstal Visual Studio.
Meskipun kita dapat membuat aplikasi Flutter tanpa Android Studio, sangat direkomendasikan untuk menginstalnya karena menyediakan Android SDK Manager dan emulator.
C:\Users\{username}\dev.\bin dari
direktori Flutter.
flutter doctor.
Membuat project Flutter dapat dilakukan melalui beberapa cara, yaitu menggunakan Command Prompt / Terminal atau langsung dari IDE seperti Visual Studio Code.
flutter create haicd haiflutter run
Flutter: New Project dan pilih opsi tersebut.
main.dart adalah titik awal
eksekusi aplikasi.build.gradle.
Info.plist.
Stateless Widget merupakan widget yang data atau tampilannya tidak mengalami perubahan ketika sebuah state dijalankan. Widget ini bersifat statis atau tetap, contohnya seperti teks statis, logo aplikasi, dan ikon tetap.
lib dengan nama stateless.dart.import 'package:flutter/material.dart';
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Stateless Widget")),
body: const Center(child: Text("ini body")),
),
);
}
}
Stateful Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga ikut berubah. Contohnya ketika tombol diklik maka warnanya berubah, atau nilai input form berubah.
MyStatefulWidget adalah class widget yang bersifat tetap (immutable) dan tidak
memiliki state._MyStatefulWidgetState adalah class state yang memiliki properti yang dapat berubah dan
bertanggung jawab untuk membangun UI.lib dengan nama stateful.dart dan tambahkan kode
berikut:import 'package:flutter/material.dart';
void main() {
runApp(const MyStatefull());
}
class MyStatefull extends StatefulWidget {
const MyStatefull({super.key});
@override
State<MyStatefull> createState() => _MyStatefullState();
}
class _MyStatefullState extends State<MyStatefull> {
int _kelipatan = 0;
void _kelipatanDua() {
setState(() {
_kelipatan += 2;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Statefull Widget")),
body: Center(
child: Container(
width: 100,
height: 100,
color: Colors.amber,
child: Column(
children: [
const Text("Kelipatan 2 : "),
Text(
'$_kelipatan',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _kelipatanDua,
tooltip: "Kelipatan 2",
child: const Icon(Icons.add),
),
),
);
}
}
Container merupakan widget yang berfungsi sebagai kotak yang dapat menampung satu widget child
dan menyediakan berbagai properti untuk dekorasi, pengaturan posisi, dan ukuran.
Properti Container:
child – Menerima satu widget yang akan ditempatkan di dalam container.color – Mengatur warna latar belakang.width dan height – Mengatur lebar dan tinggi container.padding – Jarak antara konten dengan bagian dalam container.margin – Jarak antara container dengan widget lain di luar container.decoration – Menerima objek BoxDecoration untuk mengatur warna, border, corner
radius, dan shadow.ElevatedButton merupakan widget tombol yang memiliki efek bayangan (shadow).
Properti ElevatedButton:
onPressed – Menerima fungsi atau callback ketika tombol ditekan.child – Widget yang ditampilkan di dalam tombol, biasanya Text atau
Icon.
style – Menerima objek ButtonStyle untuk menyesuaikan tampilan tombol seperti
warna latar, warna teks, padding, dan bentuk.Icon digunakan untuk menampilkan ikon. Flutter menyediakan ikon dari Material Icons (Google) dan Cupertino Icons (Apple).
Properti Icon:
icon – Menerima objek IconData dari kelas Icons atau
CupertinoIcons.
color – Mengatur warna ikon.size – Mengatur ukuran ikon dalam piksel.Image adalah widget dasar untuk menampilkan gambar dari berbagai sumber seperti asset, network, memory, atau file system.
Properti Image:
image – Menerima objek ImageProvider seperti AssetImage,
NetworkImage, dll.
width dan height – Mengatur lebar dan tinggi gambar.fit – Menyesuaikan ukuran gambar (cover, fill, contain).alignment – Mengatur posisi gambar.assets/images.logo.png) ke dalam folder tersebut.pubspec.yaml dengan menambahkan baris berikut di bawah bagian
flutter:.
flutter:
assets:
- assets/images/logo.png
CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil atau inisial pengguna dalam bentuk lingkaran.
Properti CircleAvatar:
child – Widget yang ditampilkan di dalam lingkaran, seperti Text atau
Icon.
backgroundImage – Menampilkan gambar dari ImageProvider seperti
NetworkImage atau AssetImage.
radius – Mengontrol ukuran lingkaran (default: 20).backgroundColor – Mengatur warna latar belakang lingkaran.Penulisan kelas ini dapat dijelaskan pada lib/tugas.dart dengan komentar sebagai pemandu apa yang dibuat.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
class PropertiesStuff extends StatelessWidget {
const PropertiesStuff({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Stateless Widget")),
body: Center(
child: Column(
children: [
Text(
"Hai i am Text Widget",
style: TextStyle(
fontSize: 14.0,
color: Colors.red,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.center,
),
Container(
width: 200,
height: 200,
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blueAccent,
border: Border.all(color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(10),
),
),
ElevatedButton(
onPressed: () {
print("tombol ditekan");
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
padding: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: const Text("Elevated Button"),
),
Icon(Icons.add, color: Colors.amber, size: 50.0),
// Apple Icons
Icon(CupertinoIcons.add, color: Colors.red, size: 50.0),
Image.network(
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
width: 100,
height: 150,
),
Image.asset('assets/image/logo.png', width: 100, height: 150),
Row(
children: [
CircleAvatar(
radius: 30,
backgroundColor: Colors.green,
child: Text(
"IF",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
SizedBox(width: 10),
CircleAvatar(
radius: 30,
backgroundColor: Colors.blue,
child: Icon(Icons.person, color: Colors.white, size: 30),
),
],
),
],
),
),
),
);
}
}
Hasilnya seperti:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePageTugas extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<HomePageTugas> {
int _selectedIndex = 0;
static List<Widget> _pages = <Widget>[
HomePage(),
AboutMeSection(),
ProfilePage(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Aplikasi Mobile Tampilan Sederhana'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: _pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.description),
label: 'About App',
),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
],
),
);
}
}
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// Profile Image
CircleAvatar(
radius: 50,
backgroundImage: AssetImage(
'assets/image/profile.png',
), // Replace with your image
),
SizedBox(height: 16),
// Name and Title
Text(
'Imbang Jayo Gampito',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
Text(
'Head Developer',
style: TextStyle(fontSize: 16, color: Colors.grey[600]),
),
SizedBox(height: 24),
Card(
child: ListTile(
leading: Icon(Icons.confirmation_num_outlined),
title: Text('NIM 2311532002'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.email),
title: Text('imbangjayogampito@gmail.com'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.phone),
title: Text('+62 851-8248-3196R'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.location_on),
title: Text('Pauh, West Sumatra'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.book),
title: Text('Informatics Unand'),
),
),
LinkButtons(),
],
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('NOTOMATIS'), centerTitle: true),
body: Center(
child: Text(
'Make payments easy',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
);
}
}
class AboutMeSection extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.all(16),
elevation: 4,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'About App',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 12),
Text(
'Hello and Welcome to Notomatis! However this is just a basic prototype of the full app, stay tuned!',
style: TextStyle(fontSize: 16),
),
],
),
),
);
}
}
class LinkButtons extends StatelessWidget {
final Uri githubUrl = Uri.parse('https://github.com/ImbangJayoGampito');
final Uri websiteUrl = Uri.parse('https://imbang.infokand23.my.id/');
void _launchUrl(Uri url) async {
if (!await launchUrl(url, mode: LaunchMode.externalApplication)) {
throw 'Could not launch $url';
}
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton.icon(
icon: Icon(Icons.code),
label: Text('GitHub'),
onPressed: () => _launchUrl(githubUrl),
),
SizedBox(width: 16),
ElevatedButton.icon(
icon: Icon(Icons.web),
label: Text('Website'),
onPressed: () => _launchUrl(websiteUrl),
),
],
);
}
}