Flutter菜单协调插件coordinator_menu的使用

Flutter菜单协调插件coordinator_menu的使用

您是否见过电子钱包应用程序的UI/UX菜单？这个库将为您解决这个问题。

示例

理解布局

使用

要使用此插件，请在pubspec.yaml文件中添加coordinator_menu作为依赖项。

dependencies:
  coordinator_menu: ^x.x.x

基本用法

以下是一个基本示例：

CoordinatorMenuWidget(
  headerView: _getHeaderView(),
  bgHeaderView: _getBgHeaderView(),
  bg: _getBg(),
  colorBgChange: Colors.white,
  containerMenuView: _getContainerView(),
  bgMenu: _getBgMenu(),
  menus: _getMenus(),
  listTitle: _getTitle(),
  paddingMenu: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
  functionView: _getListFunction(),
  paddingCollapseMenu: const EdgeInsets.fromLTRB(62, 8, 108, 8),
),

属性

完整示例

以下是完整的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:coordinator_menu/coordinator_menu.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: _getBasicStyle()
            ),
          ],
        ),
      )
    );
  }

  Widget _getBasicStyle(){
    return CoordinatorMenuWidget(
      headerView: _getHeaderView(),
      bgHeaderView: _getBgHeaderView(),
      bg: _getBg(),
      colorBgChange: Colors.white,
      containerMenuView: _getContainerView(),
      bgMenu: _getBgMenu(),
      menus: _getMenus(),
      listTitle: _getTitle(),
      paddingMenu: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
      functionView: _getListFunction(),
      paddingCollapseMenu: const EdgeInsets.fromLTRB(62, 8, 108, 8),
      onFinishProgress: (value) {
        print("value: ${value}");
      },
    );
  }

  Widget _getBg(){
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.asset("assets/images/bg.png", height: 160.0, width: double.infinity, fit: BoxFit.fill),
        const SizedBox(height: 80)
      ],
    );
  }

  List<Widget> _getMenus(){
    return [
      _getItemMenu(Icons.account_balance_wallet),
      _getItemMenu(Icons.account_balance_wallet),
      _getItemMenu(Icons.account_balance_wallet),
      _getItemMenu(Icons.account_balance_wallet),
    ];
  }

  List<Widget> _getTitle(){
    return [
      _getTextMenu("Menu 1"),
      _getTextMenu("Menu 2"),
      _getTextMenu("Menu 3"),
      _getTextMenu("Menu 44"),
    ];
  }

  Widget _getBgMenu(){
    return Container(
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(5)
      ),
      width: 50.0,
      height: 50.0,
    );
  }

  Widget _getItemMenu(IconData iconData){
    return Icon(
      iconData,
      color: Colors.white,
      size: 30.0,
    );
  }

  Widget _getTextMenu(String text){
    return Container(
      child: Text(
        text,
        textAlign: TextAlign.center,
      ),
    );
  }

  Widget _getHeaderView(){
    return const SizedBox(
      width: double.maxFinite,
      height: 50.0,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.search, color: Colors.white, size: 30,),
            Expanded(child: SizedBox()),
            Icon(Icons.notification_add_outlined, color: Colors.white, size: 30),
            SizedBox(width: 16.0,),
            Icon(Icons.message_outlined, color: Colors.white, size: 30,),
          ],
        ),
      ),
    );
  }

  Widget _getBgHeaderView(){
    return Container(
      width: double.maxFinite,
      height: 50.0,
      color: Colors.blue,
    );
  }

  SliverMultiBoxAdaptorWidget _getListFunction() {
    return SliverGrid.builder(gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4
    ), itemBuilder: (context, index) {
      return Container(
        color: Colors.white,
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.account_balance),
            Text("Function")
          ],
        ),
      );
    },
    itemCount: 4);
  }

  Widget _getContainerView(){
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      color: Colors.transparent,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.grey.shade200,
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
  }
}