skip to Main Content

How to left align text title in app bar?
In android: they’re still left-aligned, but ios: they’re center-aligned title.
How to fix that?

AppBar(
      titleSpacing: 0,
      centerTitle: false,
      automaticallyImplyLeading: false,
      leadingWidth: 0,
      title: Image.asset(Images.appLogo, height: 28, width: 28)
);

3

Answers


  1. You can set the platform parameter in the ThemeData of the app to TargetPlatform.android. Then the app will behave as if it were running on an android device!

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(
        MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            platform: TargetPlatform.android,
          ),
          home: Scaffold(
          appbar: AppBar(
              automaticallyImplyLeading: false,
              leadingWidth: 0,
              title: Image.asset(Images.appLogo, height: 28, width: 28)
            );
            body: Container(),
          ),
        ),
      );
    }
    
    Login or Signup to reply.
  2. In iOS app title have always a center aligned behaviour. If you need align title in left side so you can follow below the code….

    appBar: AppBar(
        title: const Text('Restaurant Menu'),
        centerTitle: false,
      ),
    
    Login or Signup to reply.
  3. You can Wrap your Text Widget with Row:

    appBar: AppBar(
        title: Row(
          children: const [
            Text(
              "Title",
            ),
          ],
        ),
      ),
    

    OR simply use centerTitle: false;

    appBar: AppBar(
        title: const Text("Title"),
        centerTitle: false,
      ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search