Flutter底部动画插件bottom_animation的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter底部动画插件bottom_animation的使用

pub package

动画底部导航栏

pic

贡献

  • 您的Pull请求欢迎🎉🙏。

展示案例

平面导航栏自定义组件 带边框半径自定义组件 曲线自定义组件
green pink orange
平面导航栏 带边框半径 暗色主题
purpule blue_grayy dark

如何使用

1. 依赖它

在您的包的pubspec.yaml文件中添加以下内容:

dependencies:
  bottom_animation: ^<last_version>

2. 安装它

通过命令行安装包:

$ flutter pub get

或者,您可以使用编辑器支持的flutter pub get。请查阅您的编辑器文档以了解更多信息。

3. 导入它

现在可以在Dart代码中使用:

import 'package:bottom_animation/bottom_animation.dart';

组件参数

名称 类型 描述 默认值
selectedIndex int 当前选中项的索引 -
hoverAlignmentDuration int 控制悬停移动速度 700(毫秒)
items List 底部导航项列表 -
backgroundColor Color 底部导航背景颜色 -
activeIconColor Color 选中项的颜色 -
deactiveIconColor Color 未选中项的颜色 -
iconSize double 底部导航图标大小 30
textStyle TextStyle 每个底部导航项的文本样式 TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.w300)
onItemSelect ValueChanged - -
barHeight double 底部导航高度 80
barRadius double 底部导航圆角半径 0
itemHoverColor Color 每个项目的背景颜色 -
itemHoverColorOpacity double - 13
itemHoverBorderRadius double - 15
itemHoverWidth double - 150
itemHoverHeight double - 55

BottomNavItem

名称 类型
title String
iconData IconData

示例

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var items = [
    BottomNavItem(title: 'Home', iconData: CupertinoIcons.heart),
    BottomNavItem(title: 'Profile', iconData: CupertinoIcons.person),
    BottomNavItem(title: 'Setting', iconData: CupertinoIcons.search),
    BottomNavItem(title: 'tools', iconData: CupertinoIcons.bluetooth),
  ];

  var cIndex;
  [@override](/user/override)
  void initState() {
    cIndex = 0;
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'example',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        backgroundColor: Colors.white,
        bottomNavigationBar: BottomAnimation(
          selectedIndex: cIndex,
          items: items,
          backgroundColor: Colors.blueGrey,
          onItemSelect: (value) {
            setState(() {
              cIndex = value;
            });
          },
          itemHoverColor: Colors.white,
          itemHoverColorOpacity: .9,
          activeIconColor: Colors.blueGrey,
          deactiveIconColor: Colors.white.withOpacity(.9),
          barRadius: 40,
          textStyle: TextStyle(
            color: Colors.blueGrey,
            fontWeight: FontWeight.bold,
          ),
          itemHoverWidth: 130,
          itemHoverBorderRadius: 40,
        ),
      ),
    );
  }
}

更多关于Flutter底部动画插件bottom_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部动画插件bottom_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,我可以为你提供一个关于如何使用Flutter中的bottom_animation插件的代码示例。bottom_animation是一个用于在Flutter应用中实现底部动画效果的插件。以下是一个简单的示例,展示了如何使用该插件来创建一个带有动画效果的底部弹出菜单。

首先,确保你已经在pubspec.yaml文件中添加了bottom_animation依赖:

dependencies:
  flutter:
    sdk: flutter
  bottom_animation: ^latest_version  # 请替换为最新的版本号

然后,运行flutter pub get来安装依赖。

接下来,你可以创建一个简单的Flutter应用,并在其中使用BottomAnimation。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:bottom_animation/bottom_animation.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late BottomAnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = BottomAnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _openBottomSheet() {
    _controller.animateTo(1.0);
  }

  void _closeBottomSheet() {
    _controller.animateTo(0.0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Animation Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            if (_controller.value == 0.0) {
              _openBottomSheet();
            } else {
              _closeBottomSheet();
            }
          },
          child: Text(_controller.value == 0.0 ? 'Open Bottom Sheet' : 'Close Bottom Sheet'),
        ),
      ),
      bottomSheet: BottomAnimation(
        controller: _controller,
        builder: (context, animation) {
          return SlideTransition(
            position: Tween<Offset>(
              begin: Offset(0, 1),
              end: Offset.zero,
            ).animate(animation),
            child: Container(
              height: 200,
              color: Colors.white,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('This is a bottom sheet with animation!'),
                    ElevatedButton(
                      onPressed: _closeBottomSheet,
                      child: Text('Close'),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 创建一个BottomAnimationController来控制动画。
  2. 使用BottomAnimation组件来创建底部弹出菜单,并通过SlideTransitionTween来实现滑动动画效果。
  3. 通过按钮点击事件来控制动画的播放和停止,从而打开或关闭底部弹出菜单。

这个示例展示了如何使用bottom_animation插件来创建一个具有动画效果的底部弹出菜单。你可以根据需要进一步自定义和扩展这个示例。

回到顶部