“This is the fourth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
📝 [Flutter] learning to form a record, [programmer essential knowledge]
📔 Basic component of Flutter [07] Appbar!
1. Write at the front
We introduced the Image component in Icon in the previous article. Today we continue learning about the Appbar component in the base of Flutter.
- 【 Basic Grammar 】
Dart uses var, final, and const
Dart Indicates the num of the data type
Dart String of data type
Dart data type list&Map
Dart method and arrow function
Dart’s method passes optional parameters and methods as parameters
Dart, Dart, Dart, Dart
Dart classes and objects in Flutter
Dart constructor of Flutter
Dart factory constructor & singleton & Initializer list
Dart class methods and object operators for Flutter
Inheritance of Flutter Dart
Dart abstract classes and interfaces in Flutter
Dart, Dart, Dart, Dart, Dart, Dart
- [Collection of Basic Components]
The base component of Flutter [01] Text
[02] Container
[03] Scaffold
[04] Row/Column
The base component of Flutter [05] Image
Base Component [06] Icon of Flutter
2. Appbar
Similar to the navigation bar in iOS, you can set title, left and right Action,
A Material Design application bar consisting of toolbars and other possible widgets, such as TabBar and FlexibleSpaceBar.
2.1 Appbar properties
- Leading: Action function on the left
- Title: Title text.
- Actions: The action function on the right can also be displayed as three dots using PopupMenuButton. After clicking, a secondary menu will pop up to realize function aggregation.
- Bottom: Usually TabBar.
- Elevation: The z coordinate of a control
- FlexibleSpace: Special effects are commonly used in SliverAppBar, which CollapsingToolbarLayout in Android easily CollapsingToolbarLayout, as discussed in this component later.
- BackgroundColor: The color of the Appbar. The change value is usually used with the following three properties.
- Brightness: Appbar brightness, white and black two kinds of themes, the default value is ThemeData. PrimaryColorBrightness.
- IconTheme: Appbar icon color, transparency, and size information. The default value is ThemeData primaryIconTheme.
- TextTheme: Text style on Appbar.
- CenterTitle: Indicates whether the title is displayed in the center. The default value varies with the OPERATING system.
- TitleSpacing: Space between title and other controls
- ToolbarOpacity: Opacity of the AppBar tool area
- BottomOpacity: Opacity of the bottom area
2.2 Appbar code examples
- Sample Appbar code
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return constMaterialApp( home: MyHomePage(), ); }}class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("I am AppBar"),),); }}Copy the code- Running effect
2.3 Leading code example
- Leading is equivalent to the back button
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
Copy the code2.4 Examples of Actions code
- Actions is the 👉 button on the right side of the navigation bar
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
}),
PopupMenuButton<String>(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem<String>(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
'Add a friend',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'person_add',
),
PopupMenuItem<String>(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
'photos',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'camera',
),
],
onSelected: (value) {
switch (value) {
case 'person_add':
print("Click add Friend");
break;
case 'camera':
print("Click to take picture");
break; }}),]Copy the code- Effect of the actions
2.5 Bottom code examples
- Bottom is the TAB under the navigation bar, like a slider
bottom: TabBar(
controller: _tabController,// Must be configured
tabs: [
Tab(text: A "page",),
Tab(text: "Page B",),
Tab(text: "C" page,)
],
),
),
body: TabBarView(
// Must be configured
controller: _tabController,
children: [
Center(child:Text(A "page")),
Center(child:Text("Page B")),
Center(child:Text("C" page)))),Copy the code- The complete code is as follows:
void main() {
runApp(TabControllerStu());
}
class TabControllerStu extends StatefulWidget {
TabControllerStu({Key? key}) : super(key: key);
_TabControllerStuState createState() => _TabControllerStuState();
}
class _TabControllerStuState extends State<TabControllerStu> with SingleTickerProviderStateMixin{
late TabController _tabController;
// Called when destroyed
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
// Initialize the call
@override
void initState() {
super.initState();
_tabController = new TabController(length: 3, vsync: this);
_tabController.addListener(() {
// Click TAB to callback once, slide to switch TAB does not callback
if(_tabController.indexIsChanging){
print("ysl--${_tabController.index}");
}
// Click TAB or swipe TAB to callback once
if(_tabController.index.toDouble() == _tabController.animation! .value){print("ysl${_tabController.index}"); }}); }@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
title: Text("WeChat"),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
}),
PopupMenuButton<String>(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem<String>(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
'Add a friend',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'person_add',
),
PopupMenuItem<String>(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
'photos',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'camera',
),
],
onSelected: (value) {
switch (value) {
case 'person_add':
print("Click add Friend");
break;
case 'camera':
print("Click to take picture");
break;
}
},
),
],
bottom: TabBar(
controller: _tabController,// Must be configured
tabs: [
Tab(text: A "page",),
Tab(text: "Page B",),
Tab(text: "C" page,)
],
),
),
body: TabBarView(
// Must be configured
controller: _tabController,
children: [
Center(child:Text(A "page")),
Center(child:Text("Page B")),
Center(child:Text("C" page))))); }}Copy the code- Running effect
3. Write in the back
Follow me, more content continues to output
- CSDN
- The Denver nuggets
- Jane’s book
🌹 if you like, give it a thumbs up 👍🌹
🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹
🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹