容器项目视图边距

Question

我想让容器项目有其余量。但似乎颤动不支持这个功能？我怎么能这样做，即使在ios和android中也很容易。

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {

  double billAmount;
  double tipPercentage = 0.0;

  @override
  Widget build(BuildContext context) {


      TextField billAmountField = new TextField(
         decoration: new InputDecoration(
           labelText: "Bill Amount"
         ),
         keyboardType: TextInputType.number,
         onChanged: (value){
             try {
                billAmount = double.parse(value);
              } catch (exception) {
                billAmount = 0.0;
              }
         },
      );

      TextField tipPercentageField = new TextField(

        decoration: new InputDecoration(labelText: "tipssss"),
        keyboardType: TextInputType.number,
         onChanged: (value){
             try {
                tipPercentage = double.parse(value);
              } catch (exception) {
                tipPercentage = 0.0;
              }
         },
      );

      RaisedButton calButton = new RaisedButton(
        child: new Text("Cal"),

        onPressed: (){
                    // Calculate tip and total
          double calculatedTip = billAmount * tipPercentage / 100.0;
          double total = billAmount + calculatedTip;

          // Generate dialog
          AlertDialog dialog = new AlertDialog(
          content: new Text("Tip: \$$calculatedTip \n"
              "Total: \$$total")
          );

          // Show dialog
          showDialog(context: context, child: dialog);
        }
          ,
      );

      Container container = new Container(

          margin: const EdgeInsets.all(30.0),

        child : new Column(

          children: <Widget>[billAmountField,tipPercentageField,calButton],

        )
      );



      return new Scaffold(appBar: new AppBar(title: new Text("Test")) , body: container,);
  }

}

代码是将项目视图添加到容器并在主页中显示它

图像是代码的结果

the result of the code

如何使按钮具有上边距？

Answer 1

I think this what you want

如果是的话，你可以使用

1. 填充类（Documentation）或
2. 集装箱类（Documentation）

   Padding _raisedButton = new Padding(
     padding: new EdgeInsets.only(top: 20.0),
     child: new RaisedButton(
       child: new Text("Cal"),
           onPressed: (){
             double calculatedTip = billAmount * tipPercentage / 100.0;
             double total = billAmount + calculatedTip;
             AlertDialog dialog = new AlertDialog(
               content: new Text("Tip: \$$calculatedTip \n"
               "Total: \$$total")
             );
             showDialog(context: context, child: dialog);
           }
     ),);

并在Column中添加_raisedButton。