Flutter 如何在Container中制作两列？

Question

There is a Container, inside you need to make two columns. In one column there will be icons with texts, and in another there will be one icon in the center. More details on the photo enter image description here

Answer 1

I made an example of what you are trying to achieve:

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
            height: 200,
            width: 300,
            decoration: BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.circular(10),
            ),
            padding: EdgeInsets.only(left: 25),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Icon(
                          Icons.mail_outline,
                          color: Colors.white,
                          size: 30,
                        ),
                        Text('title'),
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        Icon(
                          Icons.mail_outline,
                          color: Colors.white,
                          size: 30,
                        ),
                        Text('title'),
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        Icon(
                          Icons.mail_outline,
                          color: Colors.white,
                          size: 30,
                        ),
                        Text('title'),
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        Icon(
                          Icons.mail_outline,
                          color: Colors.white,
                          size: 30,
                        ),
                        Text('title'),
                      ],
                    ),
                  ],
                ),
                Spacer(),
                Container(
                  height: 60,
                  width: 60,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: Colors.white,
                      width: 2,
                    ),
                  ),
                  child: Center(
                    child: Text('Photo'),
                  ),
                ),
                Spacer(),
              ],
            )),
      ),
    );
  }
}

OUTPUT:

Answer 2

This is the code, which will help you attain what you want to achieve. Also, I have replaced the photo with the real image, to give you a feel about how the image works. However, it is NetworkImage(), it uses web images, if you want to use the local image, then do use AssetImage()

       Container(
          height: 200.0,
          width: 350.0,
          padding: EdgeInsets.all(20.0),
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(10.0)
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.mail_outline,
                        color: Colors.white,
                        size: 30,
                      ),
                      SizedBox(width: 10.0),
                      Text('title', style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold)),
                    ]
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.mail_outline,
                        color: Colors.white,
                        size: 30,
                      ),
                      SizedBox(width: 10.0),
                      Text('title', style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold)),
                    ]
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.mail_outline,
                        color: Colors.white,
                        size: 30,
                      ),
                      SizedBox(width: 10.0),
                      Text('title', style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold)),
                    ]
                  )
                ]
              ),
              Expanded(
                flex: 1,
                child: Align(
                  alignment: Alignment.center,
                  child: Container(
                    height: 80.0,
                    width: 80.0,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.white, width: 3.0),
                      borderRadius: BorderRadius.all(Radius.circular(40.0)),
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage('https://image.shutterstock.com/image-photo/beautiful-pink-flower-anemones-fresh-260nw-1028135845.jpg')
                      )
                    )
                  )
                )
              )
            ]
          )
        )

RESULT