Search code examples
flutterdartappbar

How to margin top and left the leading Icon flutter


Am having trouble regarding margin-left and top on the Apppbar, am using the leading icon, but I failed to reposition it.

Below is my code :

child: Scaffold(
            appBar: PreferredSize(
              preferredSize: Size.fromHeight(150.0),
              child: AppBar(
                leading: SizedBox(
                  width: 200,
                height: 200,

                child: Transform.scale(scale: 2,
                    child: IconButton(
                      icon: Image.asset('assets/app_logo.png')
                  ,
                ),
                )
                ),
            centerTitle: true,
            actions: <Widget>[
              IconButton(
                  icon: Image.asset('assets/path.png'))
            ],
            bottom: TabBar(
                labelColor: Colors.white,
                indicatorColor: Colors.lime,

                tabs:[
                  Tab(icon: null,text: 'RECENT',),
                  Tab(icon: null, text: 'TOPICS',),
                  Tab(icon: null, text: 'AUTHORS',),
                ]
            ),
          )

This is where my styling for the leading icon is :

leading: SizedBox(
                      width: 200,
                    height: 200,

                    child: Transform.scale(scale: 2,
                        child: IconButton(
                          icon: Image.asset('assets/app_logo.png')
                      ,
                    )

This is screen shot :

enter image description here


Solution

  • I don't think you can easily change the size of the leading widget regarding the layout of the AppBar

    But you can use a Stack widget to put your logo over the AppBar like this :

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(150.0),
            child: Stack(
              children: <Widget>[
                AppBar(
                  bottom: TabBar(
                    controller: _tabController,
                    labelColor: Colors.white,
                    indicatorColor: Colors.lime,
                    tabs: [
                      Tab(
                        icon: null,
                        text: 'RECENT',
                      ),
                      Tab(
                        icon: null,
                        text: 'TOPICS',
                      ),
                      Tab(
                        icon: null,
                        text: 'AUTHORS',
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(left: 20, top: 60),
                  child: Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow,
                    child: Center(child: Text('Logo')),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
    

    enter image description here