在 TabBar Flutter 顶部创建 SearchBar

Question

我想在 flutter 中创建这样的页面：

根据图片，小部件必须在 TabBar 顶部包含 SearchBar。但是我不知道怎么把SearchBar和代码放在一起。

我试过这样的代码：

return DefaultTabController(
  length: 9,
  child: Scaffold(
    appBar: AppBar(
      bottom: const TabBar(
          isScrollable: true,
          tabs: [
            Tab(
              text: 'Semua',
            ),
            Tab(
              text: 'Project Manager',
            ),
            Tab(
              text: 'Project Director',
            ),
            Tab(
              text: 'Manager',
            ),
            Tab(
              text: 'Officer 1',
            ),
            Tab(
              text: 'Officer 2',
            ),
            Tab(
              text: 'Officer 1',
            ),
            Tab(
              text: 'Officer 2',
            ),
            Tab(
              text: 'Officer 1',
            )
          ]),
    ),
    body: TabBarView(
      children: [
        Container(
          color: Colors.white,
          child: Column(
            children: [
              Card(
                margin: EdgeInsets.all(13.0),
                elevation: 10,
                child: Row(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(13.0),
                      child: GestureDetector(
                        onTap: () {

                        },
                        child: Container(
                          width: 46.0,
                          height: 46.0,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius:
                              BorderRadius.all(Radius.circular(75.0)),
                              boxShadow: [
                                BoxShadow(blurRadius: 7.0, color: Colors.black)
                              ]),
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        showDialog<void>(
                          context: context,
                          barrierDismissible: false,
                          builder: (BuildContext conext) {
                            return AlertDialog(
                              title: Text('Not in stock'),
                              content:
                              const Text('This item is no longer available'),
                              actions: <Widget>[
                                FlatButton(
                                  child: Text('Ok'),
                                  onPressed: () {
                                    Navigator.of(context).pop();
                                  },
                                ),
                              ],
                            );
                          },
                        );
                      },
                      child: Container(
                          padding: EdgeInsets.all(30.0),
                          child: Chip(
                            label: Text('Angela Smith'),
                          )),
                    ),
                  ],
                ),
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          child: Column(
            children: [
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              const Expanded(
                  child: ListTile(
                    leading: CircleAvatar(),
                    title: Text('Angela Smith'),
                    subtitle: Text('Project Manager'),
                    trailing: Icon(Icons.more_vert),
                  )
              ),
              ElevatedButton(
                  onPressed: () {},
                  child: Text('+ Tambah Pengguna Baru')
              )
            ],
          ),
        ),
      ],
    ),
  ),
);

完整代码在这里：https://pastebin.com/ESrDUu2C

我的问题是，如何在TabBar 之上添加SearchBar Widget。我试过了，但结果只是空白页。谢谢！

Answer 1

您可以将 PreferredSize 扩展为 bottom，child 将是 Column，

  bottom: PreferredSize(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                CupertinoSearchTextField(),
                TabBar(
                  tabs: <Widget>[
                    //...
                  ],
                ),
              ],
            ),
            preferredSize: const Size.fromHeight(
                kToolbarHeight * 1.5), //based on searchBar height
          ),