Flutter 可折疊邊欄
一個(gè)可在Flutter應(yīng)用中創(chuàng)建可折疊的側(cè)邊欄導(dǎo)航抽屜的 Flutter 插件。原文鏈接：https://medium.com/flutterdevs/foldable-sidebar-in-flutter-7addcfb8304f
移動(dòng)應(yīng)用程序具有多種方法來(lái)處理屏幕之間的導(dǎo)航，例如導(dǎo)航抽屜，底部導(dǎo)航欄，滑動(dòng)選項(xiàng)卡等。
Flutter使開(kāi)發(fā)人員可以輕松使用導(dǎo)航抽屜，而無(wú)需其他人就無(wú)需編寫(xiě)大部分代碼。
在本博客中，我們將探討Flutter中 的**可折疊側(cè)邊欄。**我們將實(shí)現(xiàn)一個(gè)可折疊的側(cè)邊欄演示程序，并在flutter應(yīng)用程序中使用foldable_sidebar包創(chuàng)建一個(gè)可折疊的側(cè)邊欄導(dǎo)航抽屜。
foldable_sidebar 地址：https://pub.dev/packages/foldable_sidebar
可折疊邊欄
這是一個(gè)易于使用的軟件包，用于向Flutter應(yīng)用程序添加可折疊的Flutter導(dǎo)航側(cè)邊欄抽屜。利用Material Design的移動(dòng)應(yīng)用程序有兩個(gè)必不可少的導(dǎo)航選擇。這些導(dǎo)航是“選項(xiàng)卡和抽屜”。抽屜是選項(xiàng)卡的一種可選選擇，因?yàn)橛袝r(shí)移動(dòng)應(yīng)用程序沒(méi)有足夠的空間來(lái)幫助選項(xiàng)卡。
抽屜是不可見(jiàn)的側(cè)屏。它是一個(gè)向左滑動(dòng)的菜單，在大多數(shù)情況下，它包含應(yīng)用程序中的重要連接，并且在顯示時(shí)擁有一半的屏幕。
該演示視頻展示了如何在Flutter中創(chuàng)建可折疊的側(cè)邊欄。它顯示了在flutter應(yīng)用程序中使用foldable_sidebar包可折疊的側(cè)邊欄將如何工作。它顯示了當(dāng)用戶點(diǎn)擊浮動(dòng)操作按鈕時(shí)，抽屜將以折疊方式顯示/隱藏。它會(huì)顯示在您的設(shè)備上。
實(shí)現(xiàn)
添加依賴
將依賴項(xiàng)添加到pubspec.yaml文件。
dependencies:
flutter:
sdk: flutter
foldable_sidebar: ^1.0.0導(dǎo)入
import 'package:foldable_sidebar/foldable_sidebar.dart';執(zhí)行 flutter packages get 命令。
將創(chuàng)建一個(gè)可折疊側(cè)邊欄構(gòu)建器狀態(tài)的實(shí)例變量。
FSBStatus _fsbStatus;在主體中，我們將實(shí)現(xiàn)FoldableSidebarBuilder（）方法。在內(nèi)部，我們將添加drawerBackgroundColor滑動(dòng)到屏幕上時(shí)，是指抽屜的背景色。我們將添加抽屜方式，以創(chuàng)建一個(gè)CustomSidebarDrawer（）類。我們將添加screenContents表示抽屜隱藏時(shí)，然后將顯示此屏幕。我們將創(chuàng)建一個(gè)welcomeScreen（）小部件。我們將深入定義以下代碼。我們將添加狀態(tài)均值以添加可折疊的側(cè)邊欄構(gòu)建器狀態(tài)實(shí)例變量。
FoldableSidebarBuilder(
drawerBackgroundColor: Colors.cyan[100],
drawer: CustomSidebarDrawer(drawerClose: (){
setState(() {
_fsbStatus = FSBStatus.FSB_CLOSE;
});
},
),
screenContents: welcomeScreen(),
status: _fsbStatus,
),我們將深入定義**welcomeScreen（）**小部件
我們將返回一個(gè)容器小部件。在此小部件中，我們將添加中心小部件。在內(nèi)部，我們將添加一個(gè)列小部件。在列小部件中，我們將添加兩個(gè)文本，并且mainAxisAlignment為中心。
Widget welcomeScreen() {
return Container(
color: Colors.black.withAlpha(50),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Welcome To Flutter Dev's",
style: TextStyle(fontSize: 25,color: Colors.white),
),
SizedBox(height: 5,),
Text("Click on FAB to Open Foldable Sidebar Drawer",
style: TextStyle(fontSize: 18,color: Colors.white
),
),
],
),
),
);
}我們將添加一個(gè)FloatingActionButton（）。在內(nèi)部，我們將添加按鈕的backgroundColor。我們將添加一個(gè)菜單圖標(biāo)和onPressed（）方法。在此方法中，我們將定義setState（）。當(dāng)_fsbStatus等于FSBStatus.FSB_OPEN時(shí)，抽屜將關(guān)閉。否則，它們將打開(kāi)。
floatingActionButton: FloatingActionButton(
backgroundColor:Colors.red[400],
child: Icon(Icons.menu,
color: Colors.white,
),
onPressed: () {
setState(() {
_fsbStatus = _fsbStatus == FSBStatus.FSB_OPEN ?
FSBStatus.FSB_CLOSE : FSBStatus.FSB_OPEN;
});
}),
定義**CustomSidebarDrawer（）**類
final Function drawerClose;
const CustomSidebarDrawer({Key key, this.drawerClose}) : super(key: key);
我們將返回一個(gè)容器小部件。在此小部件中，我們將添加一個(gè)列小部件。在內(nèi)部，我們將添加圖像，文本和ListTile。我們將添加三個(gè)帶有圖標(biāo)和文本的ListTile。
return Container(
color: Colors.white,
width: mediaQuery.size.width * 0.60,
height: mediaQuery.size.height,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 200,
color: Colors.grey.withAlpha(30),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
"assets/devs.jpg",
width: 100,
height: 100,
),
SizedBox(
height: 10,
),
Text("Flutter Devs")
],
)),
ListTile(
onTap: (){
debugPrint("Tapped Profile");
},
leading: Icon(Icons.person),
title: Text(
"Your Profile",
),
),
Divider(
height: 1,
color: Colors.grey,
),
ListTile(
onTap: () {
debugPrint("Tapped settings");
},
leading: Icon(Icons.settings),
title: Text("Settings"),
),
Divider(
height: 1,
color: Colors.grey,
),
ListTile(
onTap: () {
debugPrint("Tapped Log Out");
},
leading: Icon(Icons.exit_to_app),
title: Text("Log Out"),
),
],
),
);
完整代碼
import 'package:flutter/material.dart';
import 'package:flutter_foldable_sidebar_demo/custom_sidebar_drawer.dart';
import 'package:foldable_sidebar/foldable_sidebar.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
FSBStatus _fsbStatus;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.red[400],
title: Text("Flutter Foldable Sidebar Demo") ,
),
body: FoldableSidebarBuilder(
drawerBackgroundColor: Colors.cyan[100],
drawer: CustomSidebarDrawer(drawerClose: (){
setState(() {
_fsbStatus = FSBStatus.FSB_CLOSE;
});
},
),
screenContents: welcomeScreen(),
status: _fsbStatus,
),
floatingActionButton: FloatingActionButton(
backgroundColor:Colors.red[400],
child: Icon(Icons.menu,
color: Colors.white,
),
onPressed: () {
setState(() {
_fsbStatus = _fsbStatus == FSBStatus.FSB_OPEN ?
FSBStatus.FSB_CLOSE : FSBStatus.FSB_OPEN;
});
}),
),
);
}
Widget welcomeScreen() {
return Container(
color: Colors.black.withAlpha(50),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Welcome To Flutter Dev's",
style: TextStyle(fontSize: 25,color: Colors.white),
),
SizedBox(height: 5,),
Text("Click on FAB to Open Foldable Sidebar Drawer",
style: TextStyle(fontSize: 18,color: Colors.white
),
),
],
),
),
);
}
}
