Lihat Tutorial Membuat SliverAppBar Flutter - Tutorial Flutter Indonesia

Lihat Tutorial Membuat SliverAppBar Flutter – Tutorial Flutter Indonesia

Gimana metode membuat toolbar energik dengan SliverAppBar pada Flutter? Di Flutter, dikala kita mau membuat AppBar dengan dimensi“ wajar” semacam cuma menimbulkan icon ataupun text dengan dimensi standar hingga AppBar widget merupakan opsi yang pas. Lihat Tutorial Membuat SliverAppBar Flutter – Tutorial Flutter Indonesia. Tetapi gimana bila menginginkan design serta dimensi yang energik pada AppBar? Semacam yang kita tahu kalau AppBar mempunyai dimensi besar standar yang tidak bisa dirubah. Buat perinci metode pemakaian AppBar widget silahkan baca disini. Widget yang pas buat membuat Toolbar energik ialah dengan SliverAppBar. Kemudian semacam apa SliverAppBar widget serta gimana metode penggunaanya? Selanjutnya ilustrasi permasalahan dalam membuat Toolbar Energik dengan SliverAppBar.

Bentuk hasil pemakaian SliverAppBar widget bisa diamati pada lukisan dibawah ini dimana dimensi dini header yang besar dengan latar belakang image kemudian dikala di scroll header menurun serta sticky di atas semacam appBar pada biasanya.

Serta pada bimbingan ini juga kita hendak coba membuat Toolbar Energik dengan SliverAppBar dengan bentuk semacam lukisan diatas

Saat sebelum mengawali koding, sebab bentuk ilustrasi memakai latar belakang lukisan hingga kita wajib simpan dulu lukisan yang hendak jadi latar belakang ke dalam berkas assets atau images

load asset image flutter

source Images:

https: atau atau id. pinterest. com atau jarum semat atau 596375175639609611 atau

https: atau atau belajarflutter. com atau wp- content atau uploads atau 2020 atau 08 atau babymetal- 1. png

Selanjutnya ilustrasi isyarat simpel pemakaian SliverAppBar dengan FlexibleSpaceBar selaku child

import package: flutter atau material. dart;

void bermain()

runApp( MyApp());

 

class MyApp extends StatelessWidget

@override

Widget build( BuildContext context)

return MaterialApp(

debugShowCheckedModeBanner: false,

home: BelajarAppBar(),

);

 

 

Lagi Trending :  Cara Menonaktifkan Peringatan Saat Membuka Aplikasi

class BelajarAppBar extends StatelessWidget

@override

Widget build( BuildContext context)

return Scaffold(

body: NestedScrollView(

headerSliverBuilder:( BuildContext context, bool innerBoxIsScrolled)

return<Widget
[

SliverAppBar(

expandedHeight: 200. 0,

floating: false,

pinned: true,

flexibleSpace: FlexibleSpaceBar(

centerTitle: true,

title: Text(” Berlatih SliverAppBar”,

gaya: TextStyle(

color: Colors. white,

fontSize: 20. 0,

)),

latar belakang: Image(

image: AssetImage( assets atau images atau Babymetal- Metal- Galaxy. jpg),

bugat: BoxFit. cover,

),

),

),

];

,

body: Center(

child: Text(” BabyMetal di BelajarFlutter. com”),

),

),

);

 

 

Bisa kita amati kalau dalam SliverAppBar Widget memakai properti pinned: true dengan expandedHeight: 200. 0 yang maksudnya dengan cara default appbar hendak mempunyai besar 200px. Dikala di scroll hingga Appbar hendak mengecil ke dimensi standar serta sticky di atas. Ilustrasi hasilnya Semacam ini:

ilustrasi sederhana silverappbar

Saat ini kita coba tambahkan Tab widget buat menunjukkan tab song serta gallery. Code nya semacam ini

import package: flutter atau material. dart;

void bermain()

runApp( MyApp());

 

class MyApp extends StatelessWidget

@override

Widget build( BuildContext context)

return MaterialApp(

debugShowCheckedModeBanner: false,

home: BelajarAppBar(),

);

 

 

class BelajarAppBar extends StatelessWidget

@override

Widget build( BuildContext context)

return Scaffold(

body: DefaultTabController(

length: 2,

child: NestedScrollView(

headerSliverBuilder:( BuildContext context, bool innerBoxIsScrolled)

return<Widget
[

SliverAppBar(

expandedHeight: 200. 0,

floating: false,

pinned: true,

flexibleSpace: FlexibleSpaceBar(

centerTitle: true,

title: Text(” Berlatih SliverAppBar”,

gaya: TextStyle(

color: Colors. white,

fontSize: 20. 0,

)),

latar belakang: Image(

image:

AssetImage( assets atau images atau Babymetal- Metal- Galaxy. jpg),

bugat: BoxFit. cover,

),

),

),

SliverPadding(

padding: new EdgeInsets. all( 10. 0),

sliver: new SliverList(

delegate: new SliverChildListDelegate([

TabBar(

labelColor: Colors. black87,

unselectedLabelColor: Colors. grey,

tabs:[

new Tab(

icon: new Icon( Icons. audiotrack), text:” Songs”),

Lagi Trending :  Cara Download Perekam Layar Full Link Cara Menggunakannya

new Tab(

icon: new Icon( Icons. collections), text:” Gallery”),

],

),

]),

),

),

];

,

body: Center(

child: Text(” BabyMetal di BelajarFlutter. com”),

),

),

),

);

 

 

Penempatan TabBar pada headerSliverBuilder membenarkan kalau Tab terletak pada header. Tetapi ada sedikit permasalahan dimana meski sudah di tempatkan pada header, tabBar turut lenyap dikala di scroll.

appbar nonsticky

Buat membuat TabBar supaya sticky( tidak turut membuat dikala scroll) membutuhkan properti pinned: true alhasil butuh mengubah pemakaian widget yang tadinya memakai SliverPadding jadi SliverPersistentHeader Widget alhasil isyarat nya semacam ini

import package: flutter atau material. dart;

void bermain()

runApp( MyApp());

 

class MyApp extends StatelessWidget

@override

Widget build( BuildContext context)

return MaterialApp(

debugShowCheckedModeBanner: false,

home: BelajarAppBar(),

);

 

 

class BelajarAppBar extends StatelessWidget

@override

Widget build( BuildContext context)

return Scaffold(

body: DefaultTabController(

length: 2,

child: NestedScrollView(

headerSliverBuilder:( BuildContext context, bool innerBoxIsScrolled)

return<Widget
[

SliverAppBar(

expandedHeight: 200. 0,

floating: false,

pinned: true,

flexibleSpace: FlexibleSpaceBar(

centerTitle: true,

title: Text(” Berlatih SliverAppBar”,

gaya: TextStyle(

color: Colors. white,

fontSize: 20. 0,

)),

latar belakang: Image(

image:

AssetImage( assets atau images atau Babymetal- Metal- Galaxy. jpg),

bugat: BoxFit. cover,

),

),

),

SliverPersistentHeader(

pinned: true,

delegate: _SliverAppBarDelegate(

TabBar(

labelColor: Colors. black87,

unselectedLabelColor: Colors. grey,

tabs:[

new Tab( icon: new Icon( Icons. audiotrack), text:” Songs”),

new Tab(

icon: new Icon( Icons. collections), text:” Gallery”),

],

),

),

),

];

,

body: Center(

child: Text(” BabyMetal di BelajarFlutter. com”),

),

),

),

);

 

 

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate

_SliverAppBarDelegate( this. _tabBar);

akhir TabBar _tabBar;

@override

double get minExtent=
_tabBar. preferredSize. height;

@override

double get maxExtent=
_tabBar. preferredSize. height;

@override

Widget build(

Lagi Trending :  Seru Boom Beach

BuildContext context, double shrinkOffset, bool overlapsContent)

return new Kontainer(

child: _tabBar,

);

 

@override

bool shouldRebuild( _SliverAppBarDelegate oldDelegate)

return false;

 

 

view rawmain. dart hosted with❤ by GitHub

Toolbar Energik dengan SliverAppBar

Bonus

Dengan SliverAppBar kita bisa membuat Appbar jadi lebih energik serta menarik. Sedikit tambahan ilustrasi memakai SliverAppBar dengan Floating Image

tambahan ilustrasi silverappbar

import package: flutter atau material. dart;

void bermain()

runApp( MyApp());

 

class MyApp extends StatelessWidget

@override

Widget build( BuildContext context)

return MaterialApp(

debugShowCheckedModeBanner: false,

home: ContohDynamicAppBar(),

);

 

 

class ContohDynamicAppBar extends StatelessWidget

@override

Widget build( BuildContext context)

return SafeArea(

child: Material(

child: CustomScrollView(

slivers:[

SliverPersistentHeader(

delegate: MySliverAppBar( expandedHeight: 200),

pinned: true,

),

SliverList(

delegate: SliverChildBuilderDelegate(

( _, index)=
ListTile(

title: Text(” Song$index”),

),

),

)

],

),

),

);

 

 

class MySliverAppBar extends SliverPersistentHeaderDelegate

akhir double expandedHeight;

MySliverAppBar(@required this. expandedHeight);

@override

Widget build(

BuildContext context, double shrinkOffset, bool overlapsContent)

return Stack(

bugat: StackFit. expand,

overflow: Overflow. visible,

children:[

Image(

image: AssetImage( assets atau images atau Babymetal- Metal- Galaxy. jpg),

bugat: BoxFit. cover,

),

Center(

child: Opacity(

opacity: shrinkOffset atau expandedHeight,

child: Text(

” BabyMetal di BelajarFlutter”,

gaya: TextStyle(

color: Colors. white,

fontWeight: FontWeight. w700,

fontSize: 20,

),

),

),

),

Positioned(

maksimum: expandedHeight atau 2- shrinkOffset,

left: MediaQuery. of( context). size. width atau 4,

child: Opacity(

opacity:( 1- shrinkOffset atau expandedHeight),

child: ClipOval(

child: Image(

width: MediaQuery. of( context). size. width atau 2,

image: AssetImage( assets atau images atau babymetal- 1. png),

),

),

),

),

],

);

 

@override

double get maxExtent=
expandedHeight;

@override

double get minExtent=
kToolbarHeight;

@override

bool shouldRebuild( SliverPersistentHeaderDelegate oldDelegate)=
true;

 

Aman Berupaya🙂