Question 75692 in Flutter Question posted in
The official Flutter documentation can be found here.

Gridtile content doesn't show up – Flutter

The child of the gridView is not appearing and I ignore why that’s the case. This kept bugging me when working on my main code, that’s why I decided to create this fast code to test why it’s not showing up and still couldn’t come up to a conclusion. It works fine with List.builder mind you, can someone help me make the content show up?

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  bool _click = false;
  void clicker() {
    setState(() {
      _click = !_click;
    });
  }

  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Container(
              child: GridView.builder(
                  itemCount: xer.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 1,
                    childAspectRatio: 3 / 2,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                  ),
                  itemBuilder: (BuildContext, index) {
                    return GridTile(
                        child: SizedBox(
                          child: Card(
                            child: Column(
                              children: [
                                Expanded(
                                  child: Container(
                                    child: Text("text"),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        header: GridTileBar(
                          backgroundColor: Colors.green,
                          title: Text("return"),
                        ),
                        footer: Text("footer text"));
                  }))),
    );
  }
}

List xer = ["orange", "banana", "strawberry"];
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The answer is very obvious, it's just the gridtile child not being centered.


  2. 0

    Make sure that the GridView is placed inside a widget that can scroll. If the GridView is not inside a ListView, NestedScrollView, or another scrolling widget, it may not appear on the screen

    Login or Signup to reply.
  3. 0

    I think I get what you’re trying to do. My solution would be this:

    @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(),
      body: GridView.builder(
          itemCount: xer.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            childAspectRatio: 3/ 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemBuilder: (context, index) {
            return GridTile(
               header: const GridTileBar(
                  backgroundColor: Colors.green,
                  title: Text("return"),
                ),
                footer: const Text("footer text"),
                child: Column( // <- column should be the first widget if you include multiple widgets as child
                  children: [
                    Expanded( //<- expands next widget to be at maximum allowed size constrained by parent
                      child: Material( //<- mimics the look of Card widget while allowing for more freedom in customizing 
                        borderRadius: BorderRadius.circular(15),
                        elevation: 10,
                        child: const Center(
                          child: Text("text", style: TextStyle(color: Colors.black),),
                        ),
                      ),
                    ),
                  ],
                ),
               );
          }),
    );
  }

    For including multiple widgets inside the Card-like column would look like this:

    child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.max, // <- column should be the first widget if you include multiple widgets as child
                  children: [
                    Expanded(
                      child: Material( //<- mimics the look of Card widget while allowing for more freedom in customizing 
                        borderRadius: BorderRadius.circular(15),
                        elevation: 10,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text("text", style: TextStyle(color: Colors.black),),
                            Text("text", style: TextStyle(color: Colors.black),),
                            Text("text", style: TextStyle(color: Colors.black),),
                            Text("text", style: TextStyle(color: Colors.black),),
                            
                           
                          ],
                        ),
                      ),
                    ),
                  ],
                ),

    Also this is the documentation for GridTile child parameter:

    The widget that fills the tile.
    This widget can only have one child. To lay out multiple children, let this widget’s child be a widget such as [Row], [Column], or [Stack], which have a children property, and then provide the children to that widget.

    Also also fixed some needless containers, and added const keywords for optimalization 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search