Share with me some good Appbar tools that I have used recently
The following is the meaning of the method name
1.backAppbar only contains the left back button and the middle title 2.baseNoBackAppbar only contains the middle title
3. baseRTextAppbar backAppbar only contains the return button on the left and the text on the right of the title in the middle, such as (OK button)
4. baseRImageAppbar only contains the return button on the left and the picture on the right of the title in the middle, such as (OK button)
5. baseRWidgetAppbar only contains the return button on the left and the custom view on the right of the middle title
Call (I'm afraid you won't know this special)
appBar: BaseAppbar().baseRWidgetAppbar(context,Constants.tuwenVxTitle, <Widget>[ method name ]),
6. baseCRWidgetAppbar customizes the return button on the left, the middle custom view, and the right custom view
appBar: BaseAppbar().baseCRWidgetAppbar(context,
Container (not written inside haha
),
<Widget>[
] ),
/
import 'package:flutter/material.dart';
import 'package:flutter_mvp/app/application.dart';
import 'package:flutter_mvp/utils/dio/constants/constants.dart';
/**
* flutter custom backAppbar
*/
typedef _CallBack = void Function();
class BaseAppbar {
/**
* Only the back button on the left and the title in the middle
* appBar: TitleBar().backAppbar(context, 'personal information'),
*/
_CallBack callback;
backAppbar( BuildContext context, String title,{VoidCallback onPressed}) {
return PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png",
width:30,height: 30,
),
)),
),
);
}
baseNoBackAppbar(BuildContext context, String title) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
elevation: 0, //Default is 4, set to 0 means no shadow
backgroundColor: Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
));
}
/**
* The right side of the custom AppBar is title
*/
baseRTextAppbar( BuildContext context, String title, String rtitle, {Null Function() callback}) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
),
)),
actions: <Widget>[
GestureDetector(
onTap: (){
if(callback!=null){
callback();
}
},
child: Container(
padding: EdgeInsets.only(right: 10),
alignment: Alignment.center,
child: Text(
rtitle,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w400, //font width.
),
),
),
),
]));
}
/**
* Customize the two images on the right side of the AppBar
*/
baseRImageAppbar(BuildContext context,String title,String rimageStr, {Null Function() callback}) {
return PreferredSize(
preferredSize: Size.fromHeight (48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
),
)),
actions: <Widget>[
GestureDetector(
onTap: () {
if (callback != null) {
callback();
}
},
child: Container(
padding: EdgeInsets.only(right: 10),
child: Image.asset(rimageStr,
width: Constants.appBarBackSize),
),
)
]));
}
/**
* 自定义AppBar 右边自定义view
*/
baseRWidgetAppbar(BuildContext context,String title, List<Widget> childWidget) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: Text(title , style: TextStyle(
color: Colors.white,
fontSize: Constants.appBarTitleSize,
),
),
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding : EdgeInsets.all(10), // Set margin
child: Image.asset(Constants.imagePath + "base_titlebar_back.png", width: Constants.appBarBackSize, height:Constants.appBarBackSize,
),
)),
actions: childWidget) );
}
/**
* Customize AppBar middle custom view and right custom view
*/
baseCRWidgetAppbar(BuildContext context,Widget centerWidget, List<Widget> childWidget) {
return PreferredSize(
preferredSize: Size.fromHeight(48),
child: AppBar(
backgroundColor:Color(Application.colorInt)
,centerTitle: true,
title: centerWidget,
leading:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
Navigator.of(context).pop("update");
}, child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10), // 设置边距
child: Image.asset(Constants.imagePath +"base_titlebar_back.png", width: Constants.appBarBackSize,height:Constants.appBarBackSize,
),
)),
actions: childWidget));
}
/**
* Close the page
*/
_popThis(BuildContext context){
Navigator.of(context).pop();
}
}
Below is the calling code
appBar: BaseAppbar().baseNoBackAppbar(context, '111'),
appBar: BaseAppbar().baseRImageAppbar(context, serchStr, Constants.imagePath+"base_titlebar_add.png", callback: () {
write your own method
}),
Only write 2 calling methods here