How to create a list of widgets that expands to two columns?

Question

I want to create a similar design to this one,

where the user can create a note and then this note will be displayed into the screen and the widget that holds this notes must expend the space of the screen (not all the screen's space, but a portion of it).

Here is what I managed to do, but the problem is there is two lists, one for the first column and one for the second, and when adding a note it can only be added into one of the columns.

Here my code:

import 'package:flutter/material.dart';

void main() => runApp(HomePage());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: SafeArea(
          child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.menu),
                Text('Home'),
                Icon(Icons.search),
              ],
            ),
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 25.0),
                  child: Container(
                    height: 500,
                    child: const Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                          children: [
                            NoteBlock(title: 'To Do List', content: 'fjskfjsk'),
                            NoteBlock(title: 'Travelling', content: 'fjskfjsk'),
                            NoteBlock(title: 'Travelling', content: 'fjskfjsk'),
                          ],
                        ),
                        Column(
                          children: [
                            NoteBlock(title: 'Travelling', content: 'fjskfjsk'),
                            NoteBlock(title: 'Travelling', content: 'fjskfjsk'),
                            NoteBlock(title: 'Travelling', content: 'fjskfjsk'),
                            NoteBlock(title: 'Travelling', content: 'fjskfjsk'),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      )),
    ));
  }
}

class NoteBlock extends StatelessWidget {
  final String title;
  final String content;

  const NoteBlock({
    super.key,
    required this.title,
    required this.content,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: Container(
          color: const Color(0xFFF7F7F7),
          height: 100,
          width: MediaQuery.of(context).size.width / 2 - 30,
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(fontSize: 20),
                ),
                SizedBox(height: 20),
                Text(content),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

score 1 · Answer 1 · answered Apr 19 '23 at 04:22

This is what I come up with

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

  @override
  State<NotePage> createState() => _NotePageState();
}

class _NotePageState extends State<NotePage> {
  List<Note> notes = const [
    Note(title: 'To Do List', content: 'fjskfjsk0'),
    Note(title: 'Travelling', content: 'fjskfjsk1'),
    Note(title: 'Travelling', content: 'fjskfjsk2'),
    Note(title: 'Travelling', content: 'fjskfjsk3'),
    Note(title: 'Travelling', content: 'fjskfjsk4'),
    Note(title: 'Travelling', content: 'fjskfjsk5'),
    Note(title: 'Travelling', content: 'fjskfjsk6'),
  ];

  late List<Note> notes1;
  late List<Note> notes2;

  @override
  void initState() {
    super.initState();
    // I chose to split the list in two, with the first half in notes1 and the second half in notes2
    // You can do it however you want
    notes1 = notes.sublist(0, notes.length ~/ 2);
    notes2 = notes.sublist(notes.length ~/ 2);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Icon(Icons.menu),
                Text('Home'),
                Icon(Icons.search),
              ],
            ),
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 25.0),
                  child: SizedBox(
                    height: 500,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                          children: notes1
                              .map((e) => NoteBlock(
                                    title: e.title,
                                    content: e.content,
                                  ))
                              .toList(),
                        ),
                        Column(
                          children: notes2
                              .map((e) => NoteBlock(
                                    title: e.title,
                                    content: e.content,
                                  ))
                              .toList(),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class NoteBlock extends StatelessWidget {
  final String title;
  final String content;

  const NoteBlock({
    super.key,
    required this.title,
    required this.content,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: Container(
          color: const Color(0xFFF7F7F7),
          height: 100,
          width: MediaQuery.of(context).size.width / 2 - 30,
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(fontSize: 20),
                ),
                const SizedBox(height: 20),
                Text(content),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Note {
  final String title;
  final String content;

  const Note({
    required this.title,
    required this.content,
  });
}

When adding a note (delete, alter, etc) make sure to change the notes variable, and call setState of NotePage widget! Hope it helps

score 0 · Answer 2 · answered Apr 19 '23 at 14:50

I found a good way to implement it using a third party package named flutter_staggered_grid_view, and here is the code:

MasonryGridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                itemCount: notes.length,
                itemBuilder: (context, index) {
                  return notes[index];
                },
              ),

and the notes list contains a list of NoteBook widgets. Here is the final design

How to create a list of widgets that expands to two columns?

2 Answers2