Flutter - How can I align the buttons on the appBar to the left?

Question

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

score 8 · Answer 1 · answered Dec 03 '20 at 05:36

8

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.

answered Dec 03 '20 at 05:36

knary

301
2
5

3

This is the proper way to go. I just don't like approaches like the one in the accepted answer, they're likely to break in the future or not work as expected under certain conditions you may not have noticed yet. – maganap Dec 28 '20 at 13:44

score 5 · Accepted Answer · answered Jun 05 '20 at 11:48

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.

score -1 · Answer 3 · answered Jun 05 '20 at 11:42

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(),
              ),
            ]),
      ),
    );
  }

I tried this. However, it ended up pushing everything all the way to the left end of the app bar, causing everything else to be pushed out of view. What did I do wrong? Does it have anything to do with flutter versions? `Spacer()` also did not work, when used with `Row()` already. — VLXU, Jun 05 '20 at 11:53

Flutter - How can I align the buttons on the appBar to the left?

3 Answers3