ETCasual
ETCasual

Reputation: 117

Back Button displaced title of AppBar

Like the title, i have created a button with Navigator.push() into a new page, the page auto generates a back button on the appBar, i appreciated that autogenerated back button but i want the back button to not displace my title's positioning, is that possible?

enter image description here

Below is my code for the button to enter this page:

Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) {
                              return FeedTest();
                            },
                          ),
                        );

This is my full code for the new page:

Widget build(BuildContext context) {
return ScrollConfiguration(
  behavior: MyBehavior(),
  child: SafeArea(
    child: DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.grey[850],
          title: Flex(
              direction: Axis.horizontal,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  'images/logo2.png',
                  isAntiAlias: true,
                  scale: 1.8,
                  fit: BoxFit.fitHeight,
                  alignment: Alignment.center,
                )
              ]),
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                text: 'Submit Feedback',
              ),
              Tab(
                text: 'Submit Testimony',
              )
            ],
          ),
        ),
        body: TabBarView(
          children: [SubmitFeedback(), SubmitTestimony()],
        ),
      ),
    ),
  ),
);

}

P.S. Title image has been blurred for privacy purposes

Upvotes: 2

Views: 1498

Answers (2)

Jitesh Mohite
Jitesh Mohite

Reputation: 34170

centerTitle: true is used to make the title center in AppBar

AppBar(
  centerTitle: true, 
  ...
)

Output:

enter image description here

Upvotes: 4

Salim Murshed
Salim Murshed

Reputation: 1441

Use centerTitle: true like below.

AppBar(
  centerTitle: true, // this is all you need
  //Rest Code here
)

I upload the full code like below.

Widget build(BuildContext context) {
return ScrollConfiguration(
  behavior: MyBehavior(),
  child: SafeArea(
    child: DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.grey[850],
          title: Flex(
              direction: Axis.horizontal,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  'images/logo2.png',
                  isAntiAlias: true,
                  scale: 1.8,
                  fit: BoxFit.fitHeight,
                  alignment: Alignment.center,
                )
              ]),
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                text: 'Submit Feedback',
              ),
              Tab(
                text: 'Submit Testimony',
              )
            ],
          ),
        ),
        body: TabBarView(
          children: [SubmitFeedback(), SubmitTestimony()],
        ),
      ),
    ),
  ),
);
}

Upvotes: 0

Related Questions