如何将符合Material Design的填充物应用到Flutter脚手架?

sqougxex  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(186)

我写了一个Flutter应用程序,它使用了package:flutter/material.dart。在iOS模拟器上运行应用程序如下所示。正如您所看到的,一行中的组件之间没有填充,组件到达顶部,底部,左侧和右侧没有填充/边距/边框。我的问题是:
推荐使用什么方法来应用Material-compliant padding,例如,用于Convert to和下拉按钮之间的标签组件间隙。我会把我的组件放在Container中并在那里应用填充吗?
先谢谢你了。

这是应用程序代码:

import 'package:flutter/material.dart';
import 'converter.dart';
import 'model.dart';

const _appName = 'Temperature Converter';

void main() {
  runApp(new MyApp());
}

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Model model = new Model();
  var _currentInput = const InputValue();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(config.title),
      ),
      body: new Column(children: <Widget>[
        new Row(children: <Widget>[
          new Expanded(
              child: new Input(
                  hintText: 'Temperature',
                  value: _currentInput,
                  onChanged: (input) => _currentInput = input)),
          new DropdownButton(
              items: createUnit(),
              onChanged: (temperatureUnit newValue) {
                setState(() {
                  model.inUnit = newValue;
                });
              },
              value: model.inUnit)
        ]),
        new Row(children: <Widget>[
          new Text("Convert to"),
          new DropdownButton(
              items: createUnit(),
              onChanged: (temperatureUnit newValue) {
                setState(() {
                  model.outUnit = newValue;
                });
              },
              value: model.outUnit),
        ]),
        new FlatButton(
            child: new Text('Calculate'),
            onPressed: () {
              setState(() {
                double inTemp = stringToDouble(_currentInput.text);
                model.inTemperature = inTemp;
                model.calculateOutTemperature();
              });
            }),
        new Text(model.outTemperatureAsString)
      ]), // This trailing comma tells the Dart formatter to use
      // a style that looks nicer for build methods.
    );
  }

  List<DropdownMenuItem> createUnit() {
    var l = new List<DropdownMenuItem<temperatureUnit>>();
    // degrees Celsius
    l.add(new DropdownMenuItem<temperatureUnit>(
        value: temperatureUnit.degreesCelsius,
        child: new Text(unitDegreesCelsius)));
    // degrees Fahrenheit
    l.add(new DropdownMenuItem<temperatureUnit>(
        value: temperatureUnit.degreesFahrenheit,
        child: new Text(unitDegreesFahrenheit)));
    // Kelvin
    l.add(new DropdownMenuItem<temperatureUnit>(
        value: temperatureUnit.kelvin, child: new Text(unitKelvin)));
    return l;
  }
}

这个问题绝不是暗示Flutter缺少了什么。我只想把它做好。;-)

soat7uwm

soat7uwm1#

一般来说,我会建议使用一个Block作为脚手架的孩子。它有一个可以设置的padding值。
您也可以使用Padding小部件。

0sgqnhkj

0sgqnhkj2#

我只知道有填充值的ButtonTheme
ButtonTheme.of(context).padding
所以我认为现在最好的解决方案是使用常量值并使用Container来应用填充。
也许我错了,但我不知道任何部件,自动应用任何材料填充。

相关问题