TechBanget Berita dan Informasi dari berbagai sumber yang terpercaya.
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(),
);
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”),
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(
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🙂