Insert Image after Gridview

Question

I’m developing an APP on flutter using a Staggeredgridview at the beginning of the build, but I’m not able to insert an image before this grid.

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class TesteMenu extends StatefulWidget {
  @override
  _TesteMenuState createState() => _TesteMenuState();
}

class _TesteMenuState extends State<TesteMenu> {
  Material meuCard(IconData icon, String titulo, int cor) {
    return Material(
      color: Colors.white,
      elevation: 15.0,
      shadowColor: Color(0X802196F3),
      borderRadius: BorderRadius.circular(24.0),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    titulo,
                    style: TextStyle(
                      color: new Color(cor),
                      fontSize: 20.0,
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      
      //Inserir aqui a imagem...
      usando o Image.asset(ola.jpeg)
      
      
      body: StaggeredGridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 12.0,
        mainAxisSpacing: 12.0,
        padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        children: <Widget>[
          meuCard(Icons.home, "HOME", 0XFFED622B),
          meuCard(Icons.home, "HOME", 0XFFED622B),
          meuCard(Icons.home, "HOME", 0XFFED622B),
          meuCard(Icons.home, "HOME", 0XFFED622B),
        ],
        staggeredTiles: [
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
          StaggeredTile.extent(1, 150.0),
        ],
      ),
    );
  }
}

Answer 1

You have on your screen the Scaffold and it has encoded 2 properties in its code, the appBar and the body. Everything that is drawn in the body of the screen must be encoded inside the body.

For your problem, one of the ways you can do is to involve your StaggeredGridView in another component. For example, involve in a Column and insert a Expanded for each component (image and list). The Expanded will allow you to dynamically define the space of each of the column components according to the screen size.

Code example:

class InformacoesPage extends StatefulWidget {
  @override
  _InformacoesPageState createState() => _InformacoesPageState();
}

class _InformacoesPageState extends State<InformacoesPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Informações"),
      ),
      body: Column(
        children: <Widget>[
          /// AQUI É ONDE FICARIA A IMAGEM
          Expanded(
            flex: 1,
            child: Container(
                child: Image.asset("assets/imagens/drawer_header.png")),
          ),
          /// AQUI É ONDE A LISTA É INSERIDA
          Expanded(
            flex: 9,
            child: Container(
              child: _buildList(),
            ),
          ),
        ],
      ),
    );
  }

  /// Implementação da lista de opções utilizando o [StaggeredGridView]
  StaggeredGridView _buildList() {
    return StaggeredGridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 12.0,
      mainAxisSpacing: 12.0,
      padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      children: <Widget>[
        meuCard(Icons.home, "HOME", 0XFFED622B),
        meuCard(Icons.home, "HOME", 0XFFED622B),
        meuCard(Icons.home, "HOME", 0XFFED622B),
        meuCard(Icons.home, "HOME", 0XFFED622B),
      ],
      staggeredTiles: [
        StaggeredTile.extent(1, 150.0),
        StaggeredTile.extent(1, 150.0),
        StaggeredTile.extent(1, 150.0),
        StaggeredTile.extent(1, 150.0),
      ],
    );
  }

  Material meuCard(IconData icon, String titulo, int cor) {
    return Material(
      color: Colors.white,
      elevation: 15.0,
      shadowColor: Color(0X802196F3),
      borderRadius: BorderRadius.circular(24.0),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    titulo,
                    style: TextStyle(
                      color: new Color(cor),
                      fontSize: 20.0,
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Another possibility would be to insert the expanded only on the list and without the property flex. In this case the image height could be fixed with the height of container and the list would occupy the remaining space of the screen.

Example 2: (only the build method of the previous example being changed here)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Informações"),
      ),
      body: Column(
        children: <Widget>[
          /// AQUI É ONDE FICARIA A IMAGEM
          Container(
            child: Image.asset("assets/imagens/drawer_header.png"),
            height: 30,
          ),

          /// AQUI É ONDE A LISTA É INSERIDA
          Expanded(
            child: Container(
              child: _buildList(),
            ),
          ),
        ],
      ),
    );
  }