The action buttons on the appBar in Flutter are aligned to the right side as default, I would like to align my FlatButton to the left, next to the title/logo.
Can anyone advise please?
Below are my codes:
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: const Text('Logo'),
elevation: 0.0,
actions: <Widget>[
FlatButton(
onPressed: () {
_select(choices[0]);
},
child: Text(
'Portfolio',
style: TextStyle(
fontFamily: 'Futura',
fontSize: 12,
color: Color.fromRGBO(80, 86, 89, 100)),
)),
Cheers, Karen
You can also use the leading
property of AppBar
which places a widget before the title. If you need more than one widget there, you can nest them within a Row
.
import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(
children: <Widget>[
Text(
'Actions Align Left',
),
FlatButton(
child: Text('FlatButton'),
)
],
)
),
);
}
}
I used Row
for the title and just put in the FlatButton
there.
Add default widget like Container
in actions and wrap it inside Expanded
widget
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: const Text('Logo'),
elevation: 0.0,
actions: <Widget>[
FlatButton(
onPressed: () {},
child: Text(
'Portfolio',
style: TextStyle(
fontFamily: 'Futura',
fontSize: 12,
color: Color.fromRGBO(80, 86, 89, 100)),
)),
Expanded(
child: Container(),
),
]),
),
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.