Article directory
I. Introduction
convex_bottom_barIt is a bottom navigation bar package for Flutter, the version number is 3.2.0. It provides an easy way to create a raised bottom navigation bar. The design of this package was inspired by Google's Material Design guidelines, but it also provides many customization options that allow developers to easily adjust the appearance and behavior of the navigation bar.
Highlights of this article:
- Learn about
convex_bottom_barthe key features of - Learn how to install and configure
- Explore basic usage and custom theme styles
- Learn how to create individual raised buttons and custom tab styles
Are you eager to become a Flutter expert with more tips and best practices? We have great news for you! Flutter from zero to one basic entry to the application line of the whole strategy is waiting for you to join! This column contains all the resources you need to learn Flutter, including code samples and in-depth analysis. The content of the column will continue to be updated, and the price will increase accordingly. Join now and enjoy the best price! In addition, we also have a dedicated discussion group, you can click here to join our discussion group to communicate and learn with other Flutter learners. Let's start our Flutter learning journey today!
2. Installation and configuration
To get started convex_bottom_bar, you need to add it to your project's dependencies. Here are the steps to install and configure:
-
Add dependencies: In the project's
pubspec.yamlfile, add the following code:dependencies: convex_bottom_bar: ^3.2.0 -
Get the package: Run
flutter pub getthe command to download the package. -
Import package: In the file you want to use
convex_bottom_bar, add the following import statement:import 'package:convex_bottom_bar/convex_bottom_bar.dart';
After the above steps, you can start using convex_bottom_barto create a raised bottom navigation bar.
3. Basic use and custom theme styles
convex_bottom_barCreating a bottom navbar is very easy using .
Here is a basic example:
Scaffold(
bottomNavigationBar: ConvexAppBar(
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.map, title: 'Discovery'),
TabItem(icon: Icons.add, title: 'Add'),
TabItem(icon: Icons.message, title: 'Message'),
TabItem(icon: Icons.people, title: 'Profile'),
],
onTap: (int i) => print('click index=$i'),
)
);
You can also customize the background, color and height of the AppBar, for example:
ConvexAppBar(
style: TabStyle.react,
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.map, title: 'Discovery'),
],
backgroundColor: Colors.blue,
height: 60,
)
With these options, you can easily create a bottom navigation bar that suits your project's needs.
This is the blog published by Xiaoyu Youth on CSDN in 2023. Due to the rampant copyright infringement of the collection station, if you do not see this article on CSDN, please contact me through CSDN, thank you for your support~
4. Buttons and Style Hooks
1. Use of a single button
If you just need a single raised button, that works ConvexButton. Here is an example:
Scaffold(
appBar: AppBar(title: const Text('ConvexButton Example')),
body: Center(child: Text('count $count')),
bottomNavigationBar: ConvexButton.fab(
onTap: () => setState(() => count++),
),
);
2. Custom Style Hooks
convex_bottom_barAn API is also provided StyleHookthat allows you to customize the tab styles. Here is an example:
StyleProvider(
style: Style(),
child: ConvexAppBar(
initialActiveIndex: 1,
height: 50,
top: -30,
curveSize: 100,
style: TabStyle.fixedCircle,
items: [
TabItem(icon: Icons.link),
TabItem(icon: Icons.import_contacts),
TabItem(title: "2020", icon: Icons.work),
],
backgroundColor: _tabBackgroundColor,
),
);
class Style extends StyleHook {
double get activeIconSize => 40;
double get activeIconMargin => 10;
double get iconSize => 20;
TextStyle textStyle(Color color) {
return TextStyle(fontSize: 20, color: color);
}
}
Note that this hook has limitations and may cause overflow errors if the dimensions you provide do not match the internal styles.
5. Right-to-left support and custom examples
1. RTL support
convex_bottom_barRTL (right-to-left) text orientation is supported internally. You can Directionalityconfigure RTL and LTR by:
Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(body: ConvexAppBar(/*TODO ...*/)),
);
2. Custom example
If the default styling doesn't meet your needs, you can ConvexAppBar.builder()create almost any tab feature with:
Scaffold(
bottomNavigationBar: ConvexAppBar.builder(
count: 5,
backgroundColor: Colors.blue,
itemBuilder: Builder(),
)
);
// 用户定义的类
class Builder extends DelegateBuilder {
Widget build(BuildContext context, int index, bool active) {
return Text('TAB $index');
}
}
6. Summary
convex_bottom_barIt is a powerful and flexible Flutter bottom navigation bar package, the version number is 3.2.0. Through this article, we learned how to install and configure the package, and how to use its rich features and customization options to create a raised bottom navigation bar.
Are you curious about Flutter and want to learn more about it? Then, Flutter from zero to one basic introduction to application launch guide will be your best choice! Here, you can find comprehensive Flutter learning resources, including code samples and in-depth analysis. Are you wondering how to build apps with Flutter? All the answers are in our column! Don't hesitate anymore, the content of the column will continue to be updated, and the price will increase accordingly. Join now and enjoy the best price! Let's explore the world of Flutter together! Want to know more? Click here to view the Flutter Developer 101 Getting Started booklet column guide . In addition, we also have a dedicated discussion group, you can click here to join our discussion group to communicate and learn with other Flutter learners.