Banner Widget in Flutter

Bismillah, Assalamu’alaikum Warahmatullahi Wabarakatuh

Halo Sobat Uda Uni.. kali ini aku akan sharing gimana caranya membuat Banner pada widget Flutter. Banner biasanya digunakan sebagai salah satu media promosi pada aplikasi, seperti content eventnya Udacoding ini (yang ada kalimat ‘UMUM’) ini yaa

source: hello.udacoding.id

Ok, lanjut ke tutorial aja yah.. ternyata caranya cukup mudah lhoo. teman-teman bisa menambahkan widget Banner pada widget yang diinginkan, contoh sederhananya seperti berikut :

Source Code :

class BannerPage extends StatelessWidget {
  const BannerPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Banner'),
      ),
      body: Container(
        height: 200,
        width: double.infinity,
        child: Banner(
          child: Card(
            child: Center(
                child: Text(
              'Card',
              style: TextStyle(color: Colors.white),
            )),
            color: Colors.blue,
          ),
          message: 'Message',
          textDirection: TextDirection.ltr,
          location: BannerLocation.topEnd,
        ),
      ),
    );
  }
}

Jadi, pada Widget Banner ini terdapat beberapa properti yang digunakan yaitu message : untuk teks yang akan ditambahkan, textDirection untuk direksi teks pada banner dan location untuk locasi dimana Banner ditempatkan

Ok! Sobat Uda Uni cukup sekian untuk tutorial kali ini, semoga bermanfaat.. Semangat Belajar ^ ^

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here