How to add multiple Children to flutter scaffold body

Question

I am trying to write multiple child to flutter scaffold body: tag.

I am new to flutter and I don't know how to do multiple children inside a body tag. his is what I have tried.

return new Scaffold(
      appBar: AppBar(
        leading: new Icon(Icons.live_tv),
        title: const Text('SnapNews'),
        backgroundColor: Colors.red,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.help),
            onPressed: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (_) => Help()));
            },
          ),
        ],
      ),
      body: new ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return new GestureDetector(
            onTap: () {
              print("tapped");
            },
            child: new Padding(
              padding: const EdgeInsets.all(8.0),
              child: new Container(
                color: Colors.grey,
                height: 100.0,
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        elevation: 4.0,
        icon: const Icon(Icons.camera_enhance),
        label: const Text('Snap'),
        backgroundColor: Colors.red,
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => CameraScreen()),
          );
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(null),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(null),
              onPressed: () {},
            )
          ],
        ),
      ),
    );

And this produces a GUI as below:

But I want to add a Search Bar on the top of this ListView

How can I do this with adding another child/children to the body: tag

Thank you.

score 8 · Answer 1 · answered Apr 25 '20 at 10:23

8

you need to give body a Column widget as a child and then you can use as many children as you want.

example

Scaffold(
  body: Column(
    children: <Widget>[
      //all the children widgets that you need
    ],
  ),
),

answered Apr 25 '20 at 10:23

Umair Jibran

423
4
9

1

this doesn't work. only gives white space doesn't even show what I had before – Jananath Banuka Apr 25 '20 at 10:49

Federick Jonathan · Accepted Answer · 2020-04-25T11:34:10.090

7

You could put the ListView.builder inside a ListView.

Edit: To make the SearchBar() not scrollable, put it inside Column instead of ListView.

        body: Column(
          children: [
            SearchBar(),
            Expanded(
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return new GestureDetector(
                    onTap: () {
                      print("tapped");
                    },
                    child: new Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: new Container(
                        color: Colors.grey,
                        height: 100.0,
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),

edited Apr 25 '20 at 11:34

answered Apr 25 '20 at 10:22

Federick Jonathan

2,726
2
13
26

When I do this, I can't see anything. Body part is empty just plain white. – Jananath Banuka Apr 25 '20 at 10:46
Okay this works, how can I make the search bar static? it also goes down when I scroll – Jananath Banuka Apr 25 '20 at 10:50
@JananathBanuka How did you fix the empty body bug? I'm having the same problem – Tclha Jan 05 '23 at 05:15

score 0 · Answer 3 · answered Apr 25 '20 at 12:07

The recommended way is that you put the search bar inside the AppBar widget inside the title. Right now you are using this title: const Text('SnapNews'), so what you can do is toggle between the Text('SnapNes') widget and the seachbar let say TextField widget. Put a search button and a cancel button in the actions in the AppBar to get the desired effect. For example:

bool isSearching = false;

appBar: AppBar(
    title: !isSearching
        ? Text('SnapNews')
        : TextField(
            onChanged: (value) {
              // search logic
            },
            style: TextStyle(color: Colors.white),
            decoration: InputDecoration(
                icon: Icon(
                  Icons.search,
                  color: Colors.white,
                ),
                hintText: "Search News Here",
                hintStyle: TextStyle(color: Colors.white)),
          ),
    actions: <Widget>[
      isSearching
          ? IconButton(
              icon: Icon(Icons.cancel),
              onPressed: () {
                setState(() {
                  this.isSearching = false;
                });
              },
            )
          : IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                setState(() {
                  this.isSearching = true;
                });
              },
            )
    ],
  ),

Check the following link.

How to add multiple Children to flutter scaffold body

3 Answers3