Flutter Изменить высоту OutlineButton внутри AppBar?

Просто интересно, как мне изменить высоту OutlineButton? Я полагаю, что это, вероятно, применимо и к другим типам кнопок.

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(),
);

Я считаю, что кнопка примерно на 8 пикселей слишком высока для моего случая, и хочу немного ее сжать.

5 дизайнов темных кнопок с использованием HTML и CSS
5 дизайнов темных кнопок с использованием HTML и CSS
Здесь представлены пять дизайнов темных кнопок с кодом с использованием HTML и CSS:
6
0
13 124
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

SizedBox должен сделать всю работу. Оберните кнопку в SizedBox.

Из документа:

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.

Это также будет работать для RaisedButton

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: (() {})),
        ),
      ),
    );
  }
}

ОБНОВЛЕНО (26.05.2018):

Если вы хотите уменьшить высоту OutlineButton внутри AppBar, используйте 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(),
);

Это позволяет мне регулировать ширину, но по какой-то причине высота не меняется.

Jus10 26.05.2018 02:05

обновил код. Думаю, проблема в том, что он, возможно, находится в AppBar. Я не думал, что это повлияет на это, но похоже, что повлияло. Он фиксирует высоту.

Jus10 26.05.2018 02:17

Также обновлен мой ответ для AppBar. Надеюсь, поможет

Phuc Tran 26.05.2018 07:51

Спасибо @ phuc-tran, я сделал небольшое исправление:

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(),
);

Другие вопросы по теме