无法在 Flutter 中正确对齐小部件

Question

我有以下代码，但我无法弄清楚如何将用户名左对齐（图像旁边）和 class-text 行右对齐。 MainAxisAlignment.spaceBetween 不成功。我在所有行和列上尝试了几种不同的对齐方式，但没有任何效果。我在两个文本之间获得 space 的唯一方法是向其中一个文本添加填充，但这不是想要的，因为用户名的大小不同并且 class 文本不会对齐到右边.

Container(
  width: 180,
  decoration: BoxDecoration(
    color: const Color(0xffe8d9c3),
    border: Border.all(color: Colors.transparent),
    borderRadius: const BorderRadius.all(
      Radius.circular(4),
    ),
    boxShadow: const [
      BoxShadow(
        color: Colors.black,
        blurRadius: 2.0,
        spreadRadius: 0.0,
        offset: Offset(0, 1),
      ),
    ],
  ),
  child: Row(
    //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      const CircleAvatar(
        backgroundImage: NetworkImage(
          'https://www.woolha.com/media/2020/03/eevee.png',
        ),
      ),
      const SizedBox(
        width: 5,
      ),
      Column(
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              StreamBuilder<DocumentSnapshot>(
                stream: userdoc.snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<DocumentSnapshot> snapshot) {
                  return Text(
                    "${snapshot.data?["username"]}",
                    style: const TextStyle(
                      fontSize: 10,
                      color: Colors.black,
                    ),
                  );
                },
              ),
              const Text(
                "Class 8",
                style: TextStyle(
                  fontSize: 10,
                  color: Colors.black,
                ),
              ),
            ],
          ),
          Stack(
            clipBehavior: Clip.none,
            children: const [
              SizedBox(
                width: 120,
                height: 15,
                child: LinearProgressIndicator(
                  value: 0.3,
                  backgroundColor: Color(0xff816840),
                  color: Color(0xffffc518),
                ),
              ),
              Positioned(
                right: 10,
                top: 2,
                child: Text(
                  "2918",
                  style: TextStyle(
                    fontSize: 10,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ],
  ),
)

Answer 1

您可以在它们之间使用 Spacer() 小部件

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Center(
        child: Container(
          width: 180,
          padding: EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: const Color(0xffe8d9c3),
            border: Border.all(color: Colors.transparent),
            borderRadius: const BorderRadius.all(
              Radius.circular(4),
            ),
            boxShadow: const [
              BoxShadow(
                color: Colors.black,
                blurRadius: 2.0,
                spreadRadius: 0.0,
                offset: Offset(0, 1),
              ),
            ],
          ),
          child: Row(
            // crossAxisAlignment: CrossAxisAlignment.center,
            //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              const CircleAvatar(
                backgroundImage: NetworkImage(
                  'https://www.woolha.com/media/2020/03/eevee.png',
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      children: const [
                        Text(
                          "username",
                          style: TextStyle(
                            fontSize: 10,
                            color: Colors.black,
                          ),
                        ),
                        Spacer(),
                        Text(
                          "Class 8",
                          style: TextStyle(
                            fontSize: 10,
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                    Stack(
                      clipBehavior: Clip.none,
                      children: const [
                        SizedBox(
                          height: 15,
                          child: LinearProgressIndicator(
                            value: 0.5,
                            backgroundColor: Color(0xff816840),
                            color: Color(0xffffc518),
                          ),
                        ),
                        Positioned(
                          right: 10,
                          top: 2,
                          child: Text(
                            "2918",
                            style: TextStyle(
                              fontSize: 10,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      )),
    );
  }
}

无法在 Flutter 中正确对齐小部件

Cant align widgets correctly in Flutter

flutter

flutter-layout

flutter-row