Flutter透明导航栏插件glass_navigation_bar的使用

Flutter透明导航栏插件glass_navigation_bar的使用

Features（功能）

Flutter 包是为开发者提供的一种多功能解决方案，用于在应用程序中添加一个现代化且视觉效果良好的根登陆页面及导航栏。

Getting Started（开始使用）

TODO: 列出前提条件并提供或指向如何开始使用该包的信息。

Usage（使用方法）

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

dependencies:
  glass_navigation_bar: ^x.y.z # 请替换为实际版本号

Example（示例）

完整示例代码

import 'package:flutter/material.dart';
import 'package:glass_navigation_bar/glass_navigation_bar.dart';
import '../pages/Page1.dart';
import '../pages/Page2.dart';
import '../pages/Page3.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: RootPage(
        buttons: const [
          {
            'icon': Icons.home,       // 主页图标
            'text': 'HOME',           // 主页文本
            'page': Page1(),          // 导航到Page1
          },
          {
            'icon': Icons.calendar_month_sharp, // 日历图标
            'text': 'EVENTS',     // 事件文本
            'page': Page2(),      // 导航到Page2
          },
          {
            'icon': Icons.person,    // 个人资料图标
            'text': 'PROFILE',     // 个人资料文本
            'page': Page3(),       // 导航到Page3
          },
          // 添加更多导航栏按钮
        ],
      ),
    );
  }
}

Pages 示例代码

Page1.dart

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: Text('This is Page 1'),
      ),
    );
  }
}

Page2.dart

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: Text('This is Page 2'),
      ),
    );
  }
}

Page3.dart

import 'package:flutter/material.dart';

class Page3 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 3'),
      ),
      body: Center(
        child: Text('This is Page 3'),
      ),
    );
  }
}

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

1 回复

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


glass_navigation_bar 是一个用于 Flutter 的插件，可以帮助你创建一个带有透明背景的导航栏。这个插件非常适合用于创建具有玻璃效果（毛玻璃效果）的导航栏，让导航栏看起来更加现代和美观。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  glass_navigation_bar: ^0.1.0 # 请检查最新版本

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

使用插件

下面是一个简单的示例，展示了如何使用 glass_navigation_bar 插件来创建一个透明的导航栏。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Glass Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GlassNavigationBarExample(),
    );
  }
}

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

class _GlassNavigationBarExampleState extends State<GlassNavigationBarExample> {
  int _selectedIndex = 0;

  static final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // 这个属性可以让导航栏的背景延伸到屏幕底部
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: GlassNavigationBar(
        backgroundColor: Colors.white.withOpacity(0.2), // 设置背景颜色和透明度
        blurRadius: 10.0, // 设置模糊半径
        elevation: 0, // 设置阴影
        items: const <GlassNavigationBarItem>[
          GlassNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          GlassNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          GlassNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home Screen'),
    );
  }
}

class SearchScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Search Screen'),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Profile Screen'),
    );
  }
}
回到顶部