将对象放在容器内

Question

新手扑了问题。

所以我正在研究在容器内定位小部件的最有效方法;我问这个是因为我发现像堆栈这样的小部件非常硬连线并将其定位到像素。我想了解尝试定位此小部件的更好方法。

在statefulWidget内部调用此方法。

 Widget myContainer() {
    double c_width = MediaQuery.of(context).size.width * 0.7;

    var logo = Icon(
      Icons.local_florist,
      color: Colors.lightBlue,
      size: 40.0,
    );
    var pitchLine1 = Text(
      'Starter line',
      style: TextStyle(fontSize: 40.0),
      textAlign: TextAlign.left,
    );

    var pitchLine2 = Text(
      'Starter line 2',
      style: TextStyle(fontSize: 40.0),
      textAlign: TextAlign.left,
    );

    var valueProp = Text(
      'All Stars. Increase your sales and understand your customers better with Great Reviews.',
      style: TextStyle(fontSize: 20.0),
      textAlign: TextAlign.left,
    );

    var conditionsApply = Text(
      'By continuing, you agree to ReviewPro\'s Terms of Use and Privacy Policy',
      style: TextStyle(fontSize: 15.0),
      textAlign: TextAlign.center,
    );

    return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            flex: 5,
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.only(
                  left: 35.0, top: 25.0, right: 35.0, bottom: 35.0),
              child: Stack(
                children: <Widget>[
                  Positioned(
                    top: 10,
                    left: 5,
                    child: logo,
                  ),
                  Positioned(
                    top: 50,
                    left: 5,
                    height: 40,
                    width: c_width,
                    child: pitchLine1,
                  ),
                  Positioned(
                    top: 90,
                    left: 5,
                    height: 40,
                    width: c_width,
                    child: pitchLine2,
                  ),
                  Positioned(
                    top: 150,
                    left: 5,
                    height: 20,
                    width: c_width,
                    child: valueProp,
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              padding: const EdgeInsets.only(
                  left: 35.0, top: 20.0, right: 35.0, bottom: 10.0),
              child: Stack(
                children: <Widget>[
                  Positioned(
                    top: 20,
                    left: 5,
                    width: 300,
//                    height: 20,
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: 'Login with Google Credentials',
                          filled: true,
                          fillColor: Colors.white),
                      autofocus: true,
                    ),
                  ),
                  Positioned(
                    top: 150,
                    left: 5,
                    width: 300,
//                    height:30,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(40),
                      child: RaisedButton(
                        child: Text("Sign up "),
                        onPressed: () {
                          Navigator.push(
                            context,
                            new MaterialPageRoute(
                                builder: (context) => new ReviewProSkeleton()),
                          );

                        },
                      ),
                    ),
                  ),
                  Positioned(
                    top: 250,
                    left: 5,
                    width: c_width,
//                    height: 20,
                    child: conditionsApply,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

}

Answer 1

所以这就是我做的：

          Expanded(
        flex: 5,
        child: Container(
          padding: const EdgeInsets.only(
              left: 35.0, top: 20.0, right: 35.0, bottom: 30.0),
          color: Colors.white,
          child: new Column(
            children: <Widget>[
              new Padding(
                padding: const EdgeInsets.only(
                    left: 35.0, top: 20.0, right: 35.0, bottom: 30.0),
                child: loginField,
              ),
              new Padding(
                padding: const EdgeInsets.only(
                    left: 35.0, top: 20.0, right: 35.0, bottom: 30.0),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: RaisedButton(
                    child: Text("Sign up "),
                    onPressed: () {
                      Navigator.push(
                        context,
                        new MaterialPageRoute(
                            builder: (context) => new FindMyListings()),
                      );
                      // TODO pass google credentials here in order to get the google my business listings.
                    },
                  ),
                ),
              ),
              new Padding(
                  padding: const EdgeInsets.only(
                      left: 35.0, top: 20.0, right: 35.0, bottom: 30.0),
                  child: conditionsApply),
            ],
          ),
        ),

这是我进行更改后屏幕的外观：