更改 AppBar 标题填充

Question

Due to unavailability of modifying app bar leading property width I'm forced to create my own leading trailing property by using AppBar title property. However I've noticed that title has some default horizontal padding there.

Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Container(
      height: 36,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(width: 80, child: Text('Cancel')),
          Text('Profile'),
          Container(width: 80, child: Text('Done'))
        ],
      ),
    ),
      ),
    )

Is there any way to make it smaller?

Answer 1

Use action[] inside the appbar instead of using Row.

  appBar: new AppBar(
      //title: new Text(Strings.app_name),
      actions: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: new RaisedButton(onPressed: (){

          },
            child: new Text('Cancel'),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: 
          new RaisedButton(onPressed: (){
            
          },child: new Text('done'),)
        ),
      ],
      //centerTitle:true,
    ),

Answer 2

You can use the titleSpacing property of the AppBar to control the horizontal spacing for the title.

For example following snippet will remove all the leading spacing from title-

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0.0,
        title: const Text('AppBar Demo'),
      ),
      body: const Center(
        child: Text(
          'This is the home page',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

I hope this helps!

Answer 3

Please use titleSpacing: 0.0

appBar: AppBar(
    titleSpacing: 0.0,
    title: Text('AppBar Example'),
  ),