无法在flutter中设计正确的布局

Question

我正在尝试使用 Flutter 和 Firebase 制作一个任务应用程序。 我不是最擅长设计的，所以我从 Dribbble 获取了一个设计，并尝试将其复制到我的应用程序中。

这是设计的链接。 滴滴链接

这是我要复制的页面：

这是我目前所做的代码：（实际上不起作用）

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final String userID = FirebaseAuth.instance.currentUser!.uid;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: 25.0),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 25),
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: StreamBuilder(
                    stream: FirebaseFirestore.instance
                        .collection("Users")
                        .doc(userID)
                        .snapshots(),
                    builder: (context, snapshot) {
                      if (snapshot.connectionState == ConnectionState.waiting) {
                        return const Center(child: CircularProgressIndicator());
                      }
                      if (snapshot.hasError) {
                        return const Text("Erreur");
                      }
                      return Text.rich(
                        TextSpan(
                          text: "Bonjour,\n",
                          style: GoogleFonts.exo2(
                            fontSize: 40,
                            height: 1.25,
                          ),
                          children: [
                            TextSpan(
                              text: snapshot.data!.data()!["name"],
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ),
              Row(
                children: [
                  // Column de gauche
                  SizedBox(
                    width: MediaQuery.of(context).size.width / 2,
                    child: ListView(
                      children: const [],
                    ),
                  ),

                  // Column de droite
                  SizedBox(
                    width: MediaQuery.of(context).size.width / 2,
                    child: Column(
                      children: [
                        Container(),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我真的不知道如何做相同的布局，因为我必须将屏幕分成两部分，并且有 ListView.builder （在我的代码中只有一个 ListView）需要固定大小。

每个人对我的代码中有任何建议可以帮助我改进它并提高我的技能，我在这里倾听！

如果有人知道我如何复制同一页面或只是帮助我这样做，那就太好了！

Answer 1

尝试使用GridView.builder，也许可以解决你的问题