CODEWITHSUNDEEP
flutterflatbutton
Karen Chan
Karen Chan

Reputation: 174

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

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

Upvotes: 2

Views: 17938

Answers (3)

knary
knary

Reputation: 311

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.

Upvotes: 9

VLXU
VLXU

Reputation: 729

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.

Upvotes: 6

Jitesh Mohite
Jitesh Mohite

Reputation: 34210

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

Upvotes: -1

Related Questions