Asset Images : Membuat Background Image di Flutter

Asset Images : Membuat Background Image di Flutter

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.

 

Tambahkan Asset Images

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

 

Buat Widget Baru

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(),
    );
  }
}

 

Asset Image - sobatcoding.com

Background image menggunakan asset image

Asset Image From Network - sobatcoding.com

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.