我正在尝试使用 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)需要固定大小。
每个人对我的代码中有任何建议可以帮助我改进它并提高我的技能,我在这里倾听!
如果有人知道我如何复制同一页面或只是帮助我这样做,那就太好了!
尝试使用GridView.builder,也许可以解决你的问题