Использование стека для выравнивания контейнеров во флаттере

Question

Я хочу, чтобы панель поиска (TextFormField) выглядела следующим образом, а фоновое изображение изгибалось в контейнере:

Это код, я попытался сложить контейнер и панель поиска вместе, а затем выровнять панель поиска с помощью функции «Позиционирование», но не смог.

Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(bottom: 20.0),
                    alignment: Alignment.topCenter,
                    color:Colors.blueAccent,
                    height:250.0,
                    /*decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15.0))
                    ),*/
                    //child: Image.asset("assets/bgImage.jpg"),
                  ),
                  Positioned(
                    top: 155.0,
                    right: 0.0,
                    left: 0.0,
                    child: Container(
                      //color: Colors.white,
                      width: 400.0,             
                      padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
                      child: TextField(
                        decoration: InputDecoration(
                          fillColor: Colors.white,
                          contentPadding: EdgeInsets.symmetric(vertical: 15.0),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                            borderRadius: BorderRadius.all(Radius.circular(20.0)),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                            borderRadius: BorderRadius.all(Radius.circular(20.0)),
                          ),
                          hintText: 'Search',
                          hintStyle: TextStyle(
                            fontSize: 18.0
                          ),
                          prefixIcon: Icon(
                            Icons.search,
                            size: 30.0,
                          ),
                          /*suffixIcon: IconButton(
                            icon: Icon(
                              Icons.clear,
                            ),
                            onPressed: _clearSearch,
                          ),*/
                          filled: true,
                        ),
                        //onSubmitted :
                      ),
                    ),
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.only(left: 20.0,right: 20.0,),
                child: Card(
                  elevation: 6.0,
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            children: <Widget>[
                              CircleAvatar(
                                radius: 30.0,
                                backgroundColor: Colors.blue,
                              ),
                              SizedBox(height: 5.0,),
                              Text('Jaipur')
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            children: <Widget>[
                              CircleAvatar(
                                radius: 30.0,
                                backgroundColor: Colors.blue,
                              ),
                              SizedBox(height: 5.0,),
                              Text('Jaipur')
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ]
          ),
        ),
      ),

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

Answer 1

Это должно работать для вас

Widget build(BuildContext context) {
return Scaffold(
  body: SingleChildScrollView(
    child: Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(bottom: 30.0),
                alignment: Alignment.topCenter,
                height:250.0,
                decoration: BoxDecoration(
                  color:Colors.blueAccent,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.elliptical(25, 10),
                    bottomRight: Radius.elliptical(25, 10),
                  )
                ),
                //child: Image.asset("assets/bgImage.jpg"),
              ),
              Positioned(
                top: 200.0,
                right: 0.0,
                left: 0.0,
                child: Container(
                  //color: Colors.white,
                  width: 400.0,             
                  padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
                  child: TextField(
                    decoration: InputDecoration(
                      fillColor: Colors.white,
                      contentPadding: EdgeInsets.symmetric(vertical: 15.0),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.grey),
                        borderRadius: BorderRadius.all(Radius.circular(20.0)),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.grey),
                        borderRadius: BorderRadius.all(Radius.circular(20.0)),
                      ),
                      hintText: 'Search',
                      hintStyle: TextStyle(
                        fontSize: 18.0
                      ),
                      prefixIcon: Icon(
                        Icons.search,
                        size: 30.0,
                      ),
                      /*suffixIcon: IconButton(
                        icon: Icon(
                          Icons.clear,
                        ),
                        onPressed: _clearSearch,
                      ),*/
                      filled: true,
                    ),
                    //onSubmitted :
                  ),
                ),
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(
              top: 10.0,
              left: 20.0,
              right: 20.0,
              bottom: 20.0,
            ),
            child: Card(
              elevation: 6.0,
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: <Widget>[
                          CircleAvatar(
                            radius: 30.0,
                            backgroundColor: Colors.blue,
                          ),
                          SizedBox(height: 5.0,),
                          Text('Jaipur')
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: <Widget>[
                          CircleAvatar(
                            radius: 30.0,
                            backgroundColor: Colors.blue,
                          ),
                          SizedBox(height: 5.0,),
                          Text('Jaipur')
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ]
      ),
    ),
  ),
);
}

Answer 2

Я внес изменения в ваш код, чтобы сделать то, что вы пытаетесь достичь. Пожалуйста, посмотрите:

SingleChildScrollView(
  child: Container(
    color: Colors.white,
    child: Column(
      children: <Widget>[
        Stack(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              alignment: Alignment.topCenter,
              height:250.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.elliptical(30,8),
                  bottomRight: Radius.elliptical(30,8),
                ),
                color:Colors.blueAccent,
              ),
              //child: Image.asset("assets/bgImage.jpg"),
            ),
            Container(
              //color: Colors.white,
              width: 400.0,
              padding: EdgeInsets.only(top: 223, left: 55, right: 55),
              child: TextField(
                decoration: InputDecoration(
                  fillColor: Colors.white,
                  contentPadding: EdgeInsets.symmetric(vertical: 15.0),
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey),
                    borderRadius: BorderRadius.all(Radius.circular(20.0)),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey),
                    borderRadius: BorderRadius.all(Radius.circular(20.0)),
                  ),
                  hintText: 'Search',
                  hintStyle: TextStyle(
                    fontSize: 18.0
                  ),
                  prefixIcon: Icon(
                    Icons.search,
                    size: 30.0,
                  ),
                  filled: true,
                ),
                //onSubmitted :
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(left: 20.0,right: 20.0, top: 20),
          child: Card(
            elevation: 6.0,
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: <Widget>[
                        CircleAvatar(
                          radius: 30.0,
                          backgroundColor: Colors.blue,
                        ),
                        SizedBox(height: 5.0,),
                        Text('Jaipur')
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: <Widget>[
                        CircleAvatar(
                          radius: 30.0,
                          backgroundColor: Colors.blue,
                        ),
                        SizedBox(height: 5.0,),
                        Text('Jaipur')
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ]
    ),
  ),
);