Sobatcoding.com - Tutorial membuat background image menggunakan flutter
Artikel kali ini kita akan belajar menambahkan image sebagai background di flutter. Bagaimana caranya? langsung saja kita praktekan.
Pertama kita buat dahulu project baru atau kalian bisa pakai project lama yang telah kalian buat.
Buatlah folder baru bernama assets/images di root projects dan copy file image dengan nama bg.jpg. Image terserah kalian bisa ambil dari mana saja.
Tambahkan asset tersebut di file pubspec.yaml agar terbaca di app dengan cara buka file pubspec.yaml dan tambahkan kode berikut:
assets:
- assets/images/bg.jpg
Kita buat sebuah widget statefull baru bernama background_screen.dart, kemudian buatlah kode seperti berikut .
class BackgroundScreen extends StatefulWidget {
const BackgroundScreen({super.key});
@override
State<BackgroundScreen> createState() => _BackgroundScreenState();
}
class _BackgroundScreenState extends State<BackgroundScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Background Image")),
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.lightBlue,
padding: const EdgeInsets.all(0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.jpg"), fit: BoxFit.cover)),
),
);
}
}
Tambahkan image background di dalam widget container
...
body: Container(
width: double.infinity,
height: double.infinity,
padding: const EdgeInsets.all(0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.jpg"), fit: BoxFit.cover)),
),
...
Pada kode di atas kita hapus bagian attr color, karena akan bentrok dengan attr decotation yang menyebabkan app akan error.
Membuat Background Image Menggunakan Gambar Dari Internet
Untuk membuat background menggunakan data dari URL Internet kalian ubah widget AssetImage menggunakan widget NetworkImage
...
body: Container(
width: double.infinity,
height: double.infinity,
padding: const EdgeInsets.all(0),
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://wallpaperaccess.com/full/2802364.jpg"),
fit: BoxFit.cover)),
),
...
Kemudian di bagian main.dart kita sedikit modif agar halaman di atas bisa tampil
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const BackgroundScreen(),
);
}
}
Background image menggunakan asset image
Background image menggunakan image network
Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.
Semoga bermanfaat.
Komentar 0