Flutter底部导航栏插件flutter_jelly_tab_bar的使用

Flutter底部导航栏插件flutter_jelly_tab_bar的使用

Flutter浪漫底部果冻标签栏

一个用于创建浪漫底部果冻标签栏的 Flutter 包。这将有助于你的应用程序更加出色。

这是来自浪漫项目的一个礼物。更多详情请访问 浪漫开发者

演示

示例

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

void main() => runApp(MyApp());

// 定义一组图标
const kSampleIcons = [
  Icons.track_changes_outlined,
  Icons.receipt_long_outlined,
  Icons.wifi_protected_setup_outlined,
  Icons.add_to_home_screen_outlined,
];

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '示例',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            // 图片背景
            Column(
              children: [
                Expanded(
                  child: Image.asset(
                    'assets/a.jpeg',
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ),
            // 底部果冻标签栏
            JellyTabBar(
              margin: EdgeInsets.all(16),
              tabs: kSampleIcons.map((e) => Icon(e)).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

开发环境

[✓] Flutter (Channel stable, 2.10.1, on macOS 12.3.1 21E258 darwin-x64, locale en-VN)
    • Flutter version 2.10.1 at ~/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db747aa133 (2个月前), 2022-02-09 13:57:35 -0600
    • Engine revision ab46186b24
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at ~/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = ~/Library/Android/sdk
    • ANDROID_SDK_ROOT = ~/Library/Android/sdk
    • Java binary at: /Applications/Android Studio 2020.3.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • 所有Android许可证已接受。

[✓] Xcode - develop for iOS和macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods版本 1.11.2

[✓] Android Studio (版本 2020.3)
    • Android Studio at /Applications/Android Studio 2020.3.app/Contents
    • Flutter插件可以从这里安装：
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart插件可以从这里安装：
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java版本 OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

示例代码

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

void main() => runApp(MyApp());

// 定义一组图标
const kSampleIcons = [
  Icons.track_changes_outlined,
  Icons.receipt_long_outlined,
  Icons.wifi_protected_setup_outlined,
  Icons.add_to_home_screen_outlined,
];

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '示例',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            // 图片背景
            Column(
              children: [
                Expanded(
                  child: Image.asset(
                    'assets/a.jpeg',
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ),
            // 底部果冻标签栏
            JellyTabBar(
              margin: EdgeInsets.all(16),
              tabs: kSampleIcons.map((e) => Icon(e)).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter底部导航栏插件flutter_jelly_tab_bar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


flutter_jelly_tab_bar 是一个用于 Flutter 的底部导航栏插件，具有独特的动画效果和外观。它提供了一个类似于果冻效果的导航栏，可以为你的应用增添一些趣味性和视觉吸引力。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_jelly_tab_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_jelly_tab_bar: ^0.1.0 # 请使用最新版本

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

使用示例

以下是一个简单的使用 flutter_jelly_tab_bar 的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Jelly Tab Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: JellyTabBarExample(),
    );
  }
}

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

class _JellyTabBarExampleState extends State<JellyTabBarExample> {
  int _selectedIndex = 0;

  // 定义页面
  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  // 定义导航栏项
  final List<JellyTabBarItem> _tabBarItems = [
    JellyTabBarItem(icon: Icons.home, title: 'Home'),
    JellyTabBarItem(icon: Icons.search, title: 'Search'),
    JellyTabBarItem(icon: Icons.person, title: 'Profile'),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: JellyTabBar(
        items: _tabBarItems,
        selectedIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}
回到顶部