如何使这个容器飘动？

Question

在这里输入图像描述

我想做这个容器，我试着把它分成两排。在那之后，我又把第一行分成了3排，但那是不同的设计。所以，请帮我做这个。

Answer 1

尝尝这个

Column(
            children: [
              Container(
                margin: EdgeInsets.fromLTRB(12, 12, 12, 12),
                padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    )),
                child: Column(
                  children: [
                    Row(
                      children: [
                        CircleAvatar(
                          backgroundImage: NetworkImage(
                              'https://picsum.photos/id/237/200/300'),
                        ),
                        SizedBox(
                          width: 20,
                        ),
                        Expanded(
                          child: Text(
                            "SIGN UP",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.fromLTRB(24, 12, 24, 12),
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              border: Border.all(
                                color: Colors.white,
                              ),
                              borderRadius: BorderRadius.all(
                                Radius.circular(16),
                              )),
                          child: Text("Step 1"),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    Container(
                      child: Text(
                          "To register, fill out the form in the sign-up section above. In order to activate your account, we will send you and activation email that you must confirm"),
                    ),
                  ],
                ),
              )
            ],
          ),

Answer 2

看看https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e。对于Flutter layout positioning来说，这是一个很好的教程。玩得开心!

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 150,
      padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 5.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        color: const Color(0xff272830),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          header(),
          const Text(
              'To register, fill out the form in the sign-up section above. In order to activate your account, we will send you an invitation email that you must confirm'),
        ],
      ),
    );
  }

  Widget header() {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Row(mainAxisSize: MainAxisSize.min, children: [
        ClipOval(
          child: Image.network(
            'https://dt2sdf0db8zob.cloudfront.net/wp-content/uploads/2019/12/9-Best-Online-Avatars-and-How-to-Make-Your-Own-for-Free-image1-5.png',
            width: 40,
            height: 40,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(width: 5),
        Text('SIGN UP'),
      ]),
      SizedBox(
        height: 40,
        child: OutlinedButton(
          onPressed: () {},
          child: const Text('Step 1',
              style: TextStyle(
                color: Colors.white,
              )),
          style: OutlinedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ),
      )
    ]);
  }
}

Answer 3

你可以用卡片来代替容器。看一下https://api.flutter.dev/flutter/material/Card-class.html中的这个例子

卡片( mainAxisSize: MainAxisSize.min，child: const ListTile(领导:图标(Icons.album))，标题:文本(“魔法夜莺”)，字幕:文本(朱莉·盖博的“音乐”)。歌词: Sidney .，)，Row( mainAxisAlignment: MainAxisAlignment.end，children: TextButton(儿童: const Text(“购买门票”)，onPressed：() {/* . */}，)，const SizedBox(宽度: 8)，TextButton(子文本: const文本(“聆听”)，onPressed：() {/* . */}，SizedBox(宽度: 8)，，]，)，