skip to Main Content

I’m trying to make a task app with Flutter and Firebase.
I’m not the best for designing so I took a design from Dribbble that i’m trying to copy for my app.

Here is the link of the design.
Dribbble link

Here is the page I’m trying to copy :
Page screenshot

Here is the code I did at the moment : (it’s actually not working)

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(),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I don’t really know how to do the same layout cause I have to split the screen in 2 parts and there is ListView.builder (in my code there is only a ListView) who needs a fixed size.

Everyone who has any tip for anything in my code to help me improve it and improve my skills, I’m here to listen !

If someone knows how i can copy the same page or just help me doing it, it would be very nice !

2

Answers


  1. try to use GridView.builder, maybe could fix your issue

    Login or Signup to reply.
  2. GridView.builder is a good solution, but for that exact look I think you need to have 2 lists next to each other.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search