简体   繁体   中英

how you can remove the padding between the icon for the drawer in the appBar and the Search Icon in flutter

i make appBar and add a drawer to it and also search icon the problem there is padding between the icon for the Drawer and the search icon And I can't get rid of it

this the code:

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
        
        backgroundColor: Color(0xffffffff),
        elevation: 1,
        toolbarHeight: 40.0,
        iconTheme: IconThemeData(color: Colors.grey),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[],
        ),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        color: Color(0xfffafafa),
        child: Text("hello"),
      ),
    );
  }
}

Wrapping your search button with this will reduce the padding.

Not sure how much of the padding you wanted to remove.

SizedBox(
  width: 10.0,
  child: IconButton(
    padding: EdgeInsets.zero,
    icon: Icon(Icons.search),
    onPressed: () {},
  ),
),

Add this lines to remove default padding of IconButton:

IconButton(
     constraints: BoxConstraints(),
     padding: const EdgeInsets.all(0),),

Try like this

appBar: AppBar(
      title: Text(title),
      backgroundColor: kPrimaryLightColor,
      actions: <Widget>[
        Padding(
            padding: EdgeInsets.only(right: 20.0),
            child: GestureDetector(
              onTap: () {},
              child: Icon(
                Icons.message_rounded,
                size: 30.0,
              ),
            )),

Solution 1

Just add a property called "titleSpacing" in your AppBar Tag,

Sample

appBar: AppBar(
        titleSpacing: 0,     //Add this line to your code
        title: Text(widget.title),
        leading: Icon(Icons.android),
        ),

Solution 2

Or wrap your title with "Transform.translate" and Add property "offset".

sample

title: Transform.translate(
       offset: Offset(-30.0, 0.0),
       child: Text('your app title')
       ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM