I'm trying to display the note sections in app home screen, but when i'm using the grid view or list view (i dn't know which one causing the issue) the widget is not showing, here is the code

SafeArea(
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 32, top: 20),
                  child: Text(
                    'Notes',
                    style: GoogleFonts.righteous(
                      textStyle: TextStyle(color: Colors.white, fontSize: 36),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 32, top: 20),
                  child: CircleAvatar(
                    backgroundColor: Colors.transparent,
                    child: ClipRRect(
                      child:
                          Image.asset('asset/bill-gates-wealthiest-person.jpg'),
                      borderRadius: BorderRadius.circular(50),
                    ),
                  ),
                )
              ],
            ),
            SizedBox(height: 30),
            Container(
                height: 38,
                width: 323,
                decoration: BoxDecoration(
                    color: Color(0xFF262636),
                    borderRadius: BorderRadius.circular(30)),
                child: TextField(
                  decoration: InputDecoration(
                    suffixIcon: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: SvgPicture.asset(
                        'asset/search.svg',
                        color: Color.fromARGB(255, 119, 119, 119),
                      ),
                    ),
                  ),
                )),
            SizedBox(height: 49),
            GridView.count(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              padding: EdgeInsets.all(20),
              children: List.generate(
                  10,
                  (index) => NoteItem(
                        id: index.toString(),
                        content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,',
                        title: 'Text $index',
                      )),
            ),
          ],
        ),
      ),

and the widget called notapp's code here

class NoteItem extends StatelessWidget {
  final String id;
  final String title;
  final String content;

  const NoteItem(
      {Key? key, required this.id, required this.title, required this.content})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (ctx) => AddNotes(),
          ),
        );
      },
      child: Container(
        height: 259,
        width: 167,
        decoration: BoxDecoration(
            color: Color(0xFF3B3A4D), borderRadius: BorderRadius.circular(30)),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: Text(
                title,
                style: TextStyle(color: Colors.white),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(right: 15, left: 15),
              child: Text(
                content,
                maxLines: 12,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

whats the problem here, i try to fix all the way i can, but its seems like i miss something

expecting screen

but whats showing is

CodePudding user response：

This is because you are not stating any dimension to an item inside column. You can just simply wrap the Gridview.count into an Expanded widget. Check the following implementation:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
        Container(
                height: 38,
                width: 323,
                decoration: BoxDecoration(
                    color: Color(0xFF262636),
                    borderRadius: BorderRadius.circular(30)),
                child: TextField(
                  decoration: InputDecoration(
                    suffixIcon: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Search', style: Text),
                    ),
                  ),
                )),
            SizedBox(height: 49),
        Expanded(
        child: GridView.count(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              padding: EdgeInsets.all(20),
              children: List.generate(
                  10,
                  (index) => NoteItem(
                        id: index.toString(),
                        content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,',
                        title: 'Text $index',
                      )),
            )),
      ]
    );
  }
}

CodePudding user response：

Wrap GridView or ListView widget into Expanded() widget:

Expanded(
    child: GridView.count(
          crossAxisCount: 2,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          padding: EdgeInsets.all(20),
          children: List.generate(
              10,
              (index) => NoteItem(
                    id: index.toString(),
                    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,',
                    title: 'Text $index',
                  )),
        ),
),