Flutter Convex Bottom Bottom Navigation

original

https://medium.flutterdevs.com/convex-bottom-bar-in-flutter-7158fc642111

code

https://github.com/flutter-devs/convex_bottom_bar_demo

refer to

• https://pub.dev/packages/convex_bottom_bar

text

Bottom Bottom bar is an application sketch, and its shape is convex Bottom. It can make the user interface look great and it can also improve the way the user interacts with the interface. In this article, we will build a simple application with one of the simplest forms, the Flutter convex Bottom bar

content:

introduction

add dependencies

how to use

Features

Attributes

implement

Summarize

GitHub link

Introduction:

Hello everyone, today we are going to discuss a very important topic about Flutter UI, this topic is the underlying navigation bar. In this article, we learned about Convex Bottom Bar . Convex Bottom Bar is a Flutter wrapper. The bottom bar of Convex Bottom is an app bar sketch in such a way that there is a convex Bottom like it. It can make the user interface look great and it can also improve the way the user interacts with the interface. In this article, we will build a simple application with the Convex Bottom Bar one of its simplest forms.

Looking at the List TabItems widget, you can interpret the icons displayed in the appbar and their titles. The list should only contain an odd number of TabItems to run the widget without causing fallacy. If you want to display an image or icon, you can provide an image for the icon variable in each TabItem widget. If you want to generate an icon bottom appbar, you can use the ConvexButton.fab widget. It generates fewer parameters and has a fast and nice single-icon appbar.

Add dependencies:

Go to pubspec in your project. Add dependencies: Add latest version of https://pub.dev/packages/convex_bottom_bar

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  convex_bottom_bar: ^3.0.0

We used convax_bottom_bar to create a better bootobar UI.

how to use:

In general, ConvexAppBar can work with scaffolding by setting its bottomNavigationBar. convexAppBar has two constructors, convexAppBar() will simplify tab creation using the levant style. Add this to the package's pubspec.yaml file, using the latest version.

Scaffold(
  body: bottomNavigationBar: ConvexAppBar();
);

Features:

• Various interior styles available
• The AppBar's theme can be changed.
• Provides a builder API for modifying new styles.
• Added badges to the tab menu.
• Beautiful transition animations
• Provides hook API to override some internal styles.
• RTL reinforcement

Attributes:

Here are some properties Convex_Bottom_Bar

• fixed (subtitle icon stays in center)
• fixedCircle (same, but with a white circle on all sides of the fixed icon)
• react clicking another icon)
• reactCircle (same as the white circle in the superscript icon)
• textIn (selected ions appear with corresponding titles)
• titled (unselected icons are single icons showing their title)
• flip (click the icon to display a flip animation)
• custom (customize predefined parameters using ConvexBottomAppBar builder)
• height (grabbing the appbar)
• top (grabbing the superscripted icon)
• curveSize (stretch the curve of the superscript icon)
• color (set the icon color)
• backgroundColor (set appbar background color)
• gradient (use gradient widget to set appbar background color)
• activeColor (set circle color)

implementation plan:

In the Convex_Bottom_Bar demo, first, we create a stateful class called MyHomePage() in this class, we create a variable selectedpage type integer pass with value 0. Define a list called pageNo, in this list we pass all the pages that we want to add to the bootom navigation bar.

int selectedpage =0;
final _pageNo = [Home() , Favorite() , CartPage() , ProfilePage()];

In BuildContext(), we define Scaffold.

appBar: AppBar(
  centerTitle: true,
  title: Text('Convex Bottom Bar'),
),

First pass \_pageno in the body, whose value is selectedPage. Using the scaffold property, we use bottomNavigationBar. Here we create ConvexAppBar() and pass Items, initialActiveIndex and onTap. In the entry, we go through all the screens we want to display in our application. In initialActiveIndexwe, we pass the already defined variable selectedpage, in onTap, we pass index and define setState() in setState, we pass selectedpage which is equivalent to index.

bottomNavigationBar: ConvexAppBar(
  items: [
    TabItem(icon: Icons._home_, title: 'Home'),
    TabItem(icon: Icons._favorite_, title: 'Favorite'),
    TabItem(icon: Icons._shopping_cart_, title: 'Cart'),
    TabItem(icon: Icons._person_, title: 'Profile'),
  ],
  initialActiveIndex: selectedpage,
  onTap: (int index){
      setState(() {
        selectedpage = index;
      });
  },
),

If we create different pages, Home(), Favorite(), CartPage(), ProfilePage(). In the Home class, we define a text with a background color.

Home screen:

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

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Home Page',
          style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold
          ),),
      ),
    );
  }
}

Favorite's Favorite Screen:

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

class Favorite extends StatefulWidget {
  const Favorite({Key? key}) : super(key: key);

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

class _FavoriteState extends State<Favorite> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors._greenAccent_,
     body: Center(
          child: Text('Favorite Page',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight._bold_ ),
          )),
    );
  }
}

CartPage screen:

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

class CartPage extends StatefulWidget {
  const CartPage({Key? key}) : super(key: key);

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

class _CartPageState extends State<CartPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors._pink_.shade100,
      body: Center(
          child: Text('Cart Page',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight._bold_ ),)),
    );
  }
}

\_ProfilePage Profile page:

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

class ProfilePage extends StatefulWidget {
  const ProfilePage({Key? key}) : super(key: key);

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

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors._yellow_,
      body: Center(
          child: Text('Profile Page',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight._bold_ ),)),
    );  }
}

When we run the application, we should get the output of the screen like the below screen video.

Conclusion:

This article describes what is Convex Bottom Bar and how to implement Convex Bottom Bar in Flutter method. You can use this package according to your needs.

If I'm doing something wrong, please let me know in the comments and I'll be happy to improve.

Applause if this article was helpful to you.

GitHub Link:

https://github.com/flutter-devs/convex_bottom_bar_demo

---

© Cat Brother

• WeChat ducafecat
• Blog ducafecat.tech
• github
• bilibili