How to center vertically a container child in flutter

2
votes

I am trying to center vertically a child of a container appBar which is text, I am new to flutter so what am I missing here. It is only being centered horizontally

The widget

import 'package:flutter/material.dart';

class MyAppbar extends StatelessWidget implements PreferredSizeWidget {
  final Widget title;

  const MyAppbar({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 0.0,
      color: Colors.white,
      child: Container(
        padding: const EdgeInsets.all(0.0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border(
            bottom: BorderSide(
              color: Color(0xffd9d9d9),
              width: .8,
              style: BorderStyle.solid,
            ),
          ),
        ),

        child: Center(child: title),
      ),
    );
  }

  final Size preferredSize = const Size.fromHeight(kToolbarHeight);
}

Where I am calling it

Scaffold(
          appBar: MyAppbar(title: Text('Welcome to Ikaze', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w400, color: Colors.black))),
          body: Center(),

        );
4
flutterflutter-appbar
Can you upload the full code? – Bilaal Abdel Hassan
Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[]) – Deepak Ror
That was the fullCode, I just uploaded where I was calling it @BilaalAbdelHassan – bihire boris
@bihireboris Use the AppBar widget to customize your appbar. It has an argument which centers the text. See my answer below. – Bilaal Abdel Hassan

4 Answers

5
votes
Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Ikaze',
            style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w400,
                color: Colors.black)),
      ),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
                'location: ${userLocation.latitude}, ${userLocation.longitude}'),
          ]))
2
votes

actually the text in your customized AppBar is vertically centered.

enter image description here

I think the effect you wanna achieve is to exclude status bar.

enter image description here

if this is what you want, just wrap Center Widget with SafeArea.

documentation here: SafeArea

SafeArea(child: Center(child: title))
0
votes

Use the AppBar widget with the argument centerTitle: true,

AppBar(
  centerTitle: true, // this is all you need
  ...
)
0
votes

so found the issue It was actually centered however since it wasn't in the safeArea widget the containing widget contained that system status bar.

fix

return Material(
      elevation: 0.0,
      color: Colors.white,
      child: Container(
        padding: const EdgeInsets.all(0.0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Color(0xffd9d9d9),
              width: .8,
              style: BorderStyle.solid,
            ),
          ),
        ),

        child: SafeArea(
          child: Container(
            alignment: Alignment.center,
            child: title,
          )),
      ),
    );