CODEWITHSUNDEEP
buttonheightflutter
Jus10
Jus10

Reputation: 15699

Flutter Change height of an OutlineButton inside an AppBar?

Just wondering how I would change the height of an OutlineButton? I suppose this would likely apply to other button types as well.

return Scaffold(
  appBar: AppBar(
    title: Text('Test'),
    actions: <Widget> [
      SizedBox(
        width: 100.0,
        height: 8.0,
        child: OutlineButton(
          borderSide: BorderSide(width: 4.0)
          child: Text('Hi'),
          onPressed: (){},
        ),
      ),
    ],
   ),
  body: Container(),
);

I am finding the button just about 8px too high for my case, and want to squish it a bit.

Upvotes: 8

Views: 21037

Answers (4)

ToraCode
ToraCode

Reputation: 432

Flutter 3.2

For every button, it should work the same. The reason why height of button didn't apply in AppBar may came from AppBar itself.

Add an Align Widget to it to make it get the height and width of the button or widget created by you.

AppBar(
        title: Text("Stack Overflow"),
        actions: [
          Align(
             alignment: Alignment.center,
             child: YourButton(),
          )
        ],
    )

Upvotes: 0

shahil
shahil

Reputation: 1001

Flutter 2.5

OutlineButton is deprecated. Instead, use the Material button. Put the Material Button inside Padding. The padding property of Padding will control the height and width of the button.

AppBar(
        title: Text("Stack Overflow"),
        actions: [
          Padding(
            padding: EdgeInsets.all(8.0),
            child: MaterialButton(
              color: Colors.yellow,
              onPressed: () {

              },
              child: Text('SUBMIT'),
            ),
          )
        ],
    )

enter image description here

Upvotes: 3

RodolfoSilva
RodolfoSilva

Reputation: 5184

Thanks @phuc-tran, I've made a small fix:

return Scaffold(
  appBar: AppBar(
    title: Text('Test'),
    actions: <Widget> [
      Padding(
        padding: EdgeInsets.all(10.0),
        child: OutlineButton(
          borderSide: BorderSide(color: Colors.blue),
          child: Text('Hi'),
          onPressed: (){},
        ),
      ),
    ],
   ),
  body: Container(),
);

Upvotes: 2

Phuc Tran
Phuc Tran

Reputation: 8083

SizedBox should do the work. Wrap your button by a SizedBox.

From the document:

If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent). If either the width or height is null, this widget will size itself to match the child's size in that dimension. If not given a child, this widget will size itself to the given width and height, treating nulls as zero.

This will work for RaisedButton also

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("SizedBox Demo"),
      ),
      body: new Center(
        child: new SizedBox(
          width: 200.0,
          height: 80.0,
          child: new OutlineButton(
              borderSide: BorderSide(width: 4.0),
              child: Text('I am a button'),
              onPressed: (() {})),
        ),
      ),
    );
  }
}

UPDATED (2018/05/26):

If you want to reduce the height of OutlineButton inside AppBar, use Padding

return Scaffold(
  appBar: AppBar(
    title: Text('Test'),
    actions: <Widget> [
      Padding(
        child: OutlineButton(
          borderSide: BorderSide(width: 4.0)
          child: Text('Hi'),
          onPressed: (){},
          padding: EdgeInsets.all(10.0),
        ),
      ),
    ],
   ),
  body: Container(),
);

Upvotes: 23

Related Questions