Belajar Flutter Biar Gak Cupu: Bikin App Ada Foto + Tombol SnackBar
Halo bestie! 👋
Pernah gak sih pengen bikin aplikasi tapi bingung mulai dari mana? Nah, kali ini kita bakal belajar bareng bikin aplikasi Flutter super simpel.
Cuma ada:
-
Nama anggota tim (biar keliatan kompak)
-
Foto kece
-
Tombol yang kalau ditekan keluar SnackBar (alias pop-up kecil di bawah layar)
Kita codingnya di zapp.run, jadi gak ribet install-install.
contohnya:
___________________________________________________________________________________
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo Widget Flutter',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kelompok 1'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Aisah, Caca, Gadiza, Nasya, Qori',
style: TextStyle(fontSize: 20),
),
const SizedBox(height: 20),
// Foto di tengah
Image.network(
'https://images.unsplash.com/photo-1753925984756-7505c50a3170?q=80&w=1029&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
width: 200,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Well')),
);
},
child: const Text('Tekan sini guis'),
),
],
),
),
);
}
}
___________________________________________________________________________________
Ngapain aja tuh kodenya?
-
MaterialApp: ini kayak rumah gede buat semua widget
-
Scaffold: bikin kerangka app (ada AppBar sama Body)
-
Text: buat nampilin nama tim biar gak lupa siapa aja anggota squad
-
Image.network: naro foto dari internet biar keliatan kece
-
ElevatedButton: tombol yang kalau di-tap muncul SnackBar, kayak notif kecil di bawah
___________________________________________________________________________________
Gimana guys, gampang kan? 🥳
Dengan step simpel gini, kamu udah bisa bikin aplikasi Flutter pertama kamu. Next step? Bisa upgrade ke app yang lebih keren, kayak galeri foto atau aplikasi biodata temen-temen sekelas.
Dengan step simpel gini, kamu udah bisa bikin aplikasi Flutter pertama kamu. Next step? Bisa upgrade ke app yang lebih keren, kayak galeri foto atau aplikasi biodata temen-temen sekelas.
Mau nyoba?
Komentar
Posting Komentar