Вложенный пользовательский интерфейс Flutter

Question

Как создать изображение, показанное в Flutter dart. Я новичок в флаттере и пробовал следующее:

body: Container(
        padding: EdgeInsets.only(top: 50.0, left: 40.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Column(
                children: <Widget>[
                  Text(
                    "Where?",
                    style: TextStyle(
                        color: Colors.blue,
                        fontSize: 50,
                        fontWeight: FontWeight.w800),
                  ),
                  Row(
                    children: <Widget>[
                      Image(
                        image: AssetImage('assets/oop2.png'),
                        height: 50,
                        width: 50,

                      ),
                      Image(
                        image: AssetImage('assets/oop3.png'),
                        height: 80,
                        width: 50,
                      ),
                      Image(
                        image: AssetImage('assets/op.png'),
                        height: 50,
                        width: 50,
                      ),
                    ],
                  )
                ],
              )
            ),
            Container(
              margin: const EdgeInsets.only(right: 5.0,bottom: 350),
              child: Image(
                image: AssetImage('assets/where.png'),
                height: 150,
                width: 120,
                alignment: FractionalOffset(-0.5, 1),
              ),
            ),
          ],

        ),
      ),

Вывод [1]: https://i.stack.imgur.com/N3X1p.png

Из текущего кода вы сделали это far [2]: https://i.stack.imgur.com/D2FhX.png

Answer 1

Все, что я здесь сделал, это использовал другой контейнер со строкой, которую вы создали в столбце, а затем установил ширину и высоту, а затем просто дал радиус правому верхнему углу с некоторой тенью. Вот как вы можете этого добиться, отрегулируйте радиус кривой, цвет тени и размытие со смещением по мере необходимости

Container(
        color: Colors.grey[200],
        padding: EdgeInsets.only(top: 50.0, left: 40.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                    child: Column(
                      children: <Widget>[
                        Text(
                          "Where?",
                          style: TextStyle(
                              color: Colors.blue,
                              fontSize: 50,
                              fontWeight: FontWeight.w800),
                        ),
                        Row(
                          children: <Widget>[
                            Image(
                              image: AssetImage('assets/oop2.png'),
                              height: 50,
                              width: 50,

                            ),
                            Image(
                              image: AssetImage('assets/oop3.png'),
                              height: 80,
                              width: 50,
                            ),
                            Image(
                              image: AssetImage('assets/op.png'),
                              height: 50,
                              width: 50,
                            ),
                          ],
                        )
                      ],
                    )
                ),
                Container(
                  margin: const EdgeInsets.only(right: 5.0,bottom: 350),
                  child: Image(
                    image: AssetImage('assets/where.png'),
                    height: 150,
                    width: 120,
                    alignment: FractionalOffset(-0.5, 1),
                  ),
                ),
              ],

            ),
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(topRight: Radius.circular(60.0))  , //Please adjust the curve yourself
                boxShadow: [
                  BoxShadow(color: Colors.black,blurRadius: 30.0) //You can have your own offset and color and blur radius
                ]
              ),
              height: 600.0,
              width: MediaQuery.of(context).size.width ,
              child: Text(''), //you can have any
            )
          ],
        ),
      ),