preface

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.

Nicholas Gaulbag, a famous IT expert, once said: The wheel is the ladder of IT progress! Popular frames are the same, with wheels pick one in a million! Flutter, a cross-platform development framework that has been on the rise for the last two years, has a smaller third-party ecosystem than other mature frameworks, but it has a lot of wheels. This series of articles select the wheels commonly used in daily APP development to share, so as to improve the efficiency of brick moving, and hope that the ecology of Flutter will become more and more perfect, with more and more wheels.

This series of articles has been prepared with over 50 wheel recommendations, working for reasons that try to produce an article every 1-2 days.

This series of articles is for those who already have some of the basics of FLUTTER

The body of the

The wheel

  • Wheel name: curved_navigation_bar
  • Wheel Overview: Flutter has a cool animation on the bottom TAB bar.
  • Wheels by [email protected]
  • ★★★★ ★
  • ★★★★
  • Effect preview:

The installation

dependencies:
  curved_navigation_bar: ^ 0.3.1
Copy the code
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
Copy the code

use

  • Items: List of button widgets
  • Index: NavigationBar index that can be used to change the current index or set the initial index
  • Color: The color of the NavigationBar. The default value is colors.white
  • ButtonBackgroundColor: Background color of the floating button
  • BackgroundColor: The background when the NavigationBar animation is hollow, Colors. BlueAccent by default
  • OnTap: Button click event (index)
  • AnimationCurve: animationCurve, default Curves. EaseOutCubic
  • AnimationDuration: The button changes the Duration of the animation, default Duration (ms: 600)
  • Height: The height of the NavigationBar, minimum value 0.0, maximum 75.0

Default example:

Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: <Widget>[
      Icon(Icons.add, size: 30),
      Icon(Icons.list, size: 30),
      Icon(Icons.compare_arrows, size: 30),
    ],
    onTap: (index) {
      //Handle button tap
    },
  ),
  body: Container(color: Colors.blueAccent),
)
Copy the code

Used in conjunction with TabBarView

class CurvedNavigationBarDemo extends StatefulWidget {
    CurvedNavigationBarDemo({Key key}) : super(key: key);

    @override
    _CurvedNavigationBarDemoState createState() => _CurvedNavigationBarDemoState();
}

class _CurvedNavigationBarDemoState extends State<CurvedNavigationBarDemo> with SingleTickerProviderStateMixin{

    TabController tabController;

    List colors=[Colors.blue,Colors.pink,Colors.orange];

    int currentIndex=0;

    @override
    void initState() {
        // TODO: implement initState
        super.initState();
        tabController = TabController(vsync: this, length: 3).. addListener((){ setState(() { currentIndex=tabController.index; }); }); }@override
    Widget build(BuildContext context) {
        return Scaffold(
            bottomNavigationBar: CurvedNavigationBar(
                backgroundColor: colors[currentIndex],
                index: currentIndex,
                items: <Widget>[
                    Icon(Icons.home, size: 30),
                    Icon(Icons.fiber_new, size: 30),
                    Icon(Icons.person, size: 30),
                ],
                onTap: (index) {
                    //Handle button tap
                    setState(() {
                        currentIndex=index;
                    });
                    tabController.animateTo(index,duration: Duration(milliseconds: 300), curve: Curves.ease);
                },
            ),
            body: TabBarView(
                controller: tabController,
                children: <Widget>[
                    Container(
                        color: colors[0],
                    ),
                    Container(
                        color: colors[1],
                    ),
                    Container(
                        color: colors[2[, ()], (). }}Copy the code

At the end

  • Address of wheel warehouse: pub.flutter-io.cn/packages/cu…
  • Series demo source: github.com/826327700/f…