CODEWITHSUNDEEP
flutterflutter-web
Nathan Nainggolan
Nathan Nainggolan

Reputation: 193

How to centered AppBar content in flutter web

I was trying to center the whole appBar content in flutter web just like the placeholder below the appBar. I wanted to make the app bar like the following image

Image

Here is the code for my Widget State

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        titleSpacing: 0.0,
        title: const Text(
          'Title',
        ),
        automaticallyImplyLeading: true,
        leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {
              Navigator.pop(
                  context,
                  MaterialPageRoute(
                      builder: (BuildContext context) => Intro()));
            }),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      backgroundColor: Theme.of(context).canvasColor,
      body: Center(
        child: AspectRatio(
          aspectRatio: 9 / 16,
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Placeholder(),
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Views: 1798

Answers (1)

GJJ2019
GJJ2019

Reputation: 5172

try to customize app bar

AppBar(
    centerTitle: true,
    titleSpacing: 0.0,
    title: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(icon: Icon(Icons.arrow_back_ios), onPressed: () {}),
        const Text('Title'),
      ],
    ),
    backgroundColor: Theme.of(context).primaryColor,
  ),

Upvotes: 2

Related Questions