CODEWITHSUNDEEP
flutter
OlivierGrenoble
OlivierGrenoble

Reputation: 4133

Flutter Layout: Add a Text above a grid

In my program, I'm reusing part of what is done in flutter_gallery demo: https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/pesto_demo.dart

More precisely, I'm reusing the way to create a RecipeGridPage. It works fine but I now want to add a Text widget above the grid. I have used things like this:

Column(
  children: <Widget>[
    Text('BlaBlaBla'),
    RecipeGridPage(recipes: kPestoRecipes),
  ],
)

But I get the following error: "RenderCustomMultiChildLayoutBox object was given an infinite size during layout".

In what widget shall I wrap RecipeGridPage to be able to add a single Text above the grid?

Thanks!

Upvotes: 5

Views: 2846

Answers (1)

diegoveloper
diegoveloper

Reputation: 103401

Try using Stack, just change the padding according your needs : 

    Stack(
            children: <Widget>[
              Text('BlaBlaBla'),
              Padding(
                padding: EdgeInsets.all(20.0),
                child: RecipeGridPage(recipes: kPestoRecipes),
              )
            ],
          ),

UPDATE

This is another solution that you could try, you will have to add the header in the line 97 of this file : https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/pesto_demo.dart

This is a basic sample:

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              _buildAppBar(),
              _buildHeader(),
              _buildBody(),
            ],
          ),
        );
      }

      SliverToBoxAdapter _buildHeader() {
        return SliverToBoxAdapter(
          child: Text("Header"),
        );
      }

      SliverAppBar _buildAppBar() {
        return SliverAppBar(
          title: Text("Title"),
        );
      }

      SliverList _buildBody() {
        return SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(title: Text("item :$index"));
            },
            childCount: 20,
          ),
        );
      }

Upvotes: 3

Related Questions