Flutter 如何制作一个类似谷歌搜索的页面？

我是个新手，我正在为自己开发一个应用程序

这是我的应用程序的快照

我被搜索页面卡住了。我想要一个像谷歌搜索的页面。我键入一些关键字，从服务器获取一些数据（json格式），并显示结果列表。我怎么做？请帮忙

这是我的密码，供你参考

//main.dart
import 'package:flutter/material.dart';
import 'package:msa_app/root_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Color pointColor = Colors.black; //color used as accent color
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: Colors.white,
        accentColor: pointColor,
      ),
      home: RootPage(),
    );
  }
}

//tab\u page.dart
进口“包装：颤振/材料.省道”；
导入“包：msa_应用程序/主页.dart”；
导入“包：msa_应用程序/搜索_页面.dart”；
类TabPage扩展StatefulWidget{
@凌驾
_TabPageState createState（）=>TabPageState（）；
}
类_TabPageState扩展状态{
int _selectedPageIndex=0；
列表页面=[
首页（），
SearchPage（），
文本（“第3页”），
];
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中心（子项：_页面[_selectedPageIndex]），
底部导航栏：底部导航栏(
onTap:\u未映射，
currentIndex:_selectedPageIndex，
固定颜色：颜色。黑色，
项目：[
BottomNavigationBarItem（图标：icon（Icons.home），标签：“home”），
BottomNavigationBarItem（图标：图标（Icons.search），标签：“search”），
底部导航气压计(
图标：图标（Icons.account\u circle），标签：“account”，
],
),
);
}
void\u未映射（整数索引）{
设置状态（）{
_selectedPageIndex=索引；
});
}
}

//root_page.dart
import 'package:flutter/material.dart';
import 'package:msa_app/tab_page.dart';

class RootPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TabPage();
  }
}

//tab_page.dart
import 'package:flutter/material.dart';
import 'package:msa_app/home_page.dart';
import 'package:msa_app/search_page.dart';

class TabPage extends StatefulWidget {
  @override
  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _selectedPageIndex = 0;
  List _pages = [
    HomePage(),
    SearchPage(),
    Text('page3'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: _pages[_selectedPageIndex]),
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onItemTapped,
        currentIndex: _selectedPageIndex,
        fixedColor: Colors.black,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), label: 'Account'),
        ],
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedPageIndex = index;
    });
  }
}