如何使用颤振创建此搜索栏和图标栏 UI（带有主页、搜索、购物车、个人资料的图标）

Question

想在我的 home_dart 页面中使用颤振添加底部搜索栏和底部图标栏。有人能帮助我吗？已经在页面中添加了 3 张卡片。如图所示，如何添加搜索栏和底部图标栏？我正在尝试创建一个时尚应用程序 UI。我是新来的颤振。如果有人可以帮助我，那就太好了。

home_page.dart

import 'package:flutter/material.dart';
import 'package:fashion_app/color_filters.dart';

 class HomePage extends StatefulWidget{
  @override
    _HomePageState createState ()=> _HomePageState();


  }



class _HomePageState extends State <HomePage> {
  final double _borderRadious = 24;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fashion store'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [

          buildColoredCard1(),
          buildColoredCard2(),
          buildColoredCard3()

        ],
      ),


    );
  }


  Widget buildColoredCard1() =>
      Card(
        shadowColor: Colors.red,
        elevation: 8,
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.redAccent, Colors.red],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Colored card',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 50),
              Text(
                'This card is rounded and has a gradient',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,

                ),


              ),
            ],
          ),
        ),
      );


  Widget buildColoredCard2() =>
      Card(
        shadowColor: Colors.red,
        elevation: 8,
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.redAccent, Colors.red],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Colored card',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 50),
              Text(
                'This card is rounded and has a gradient',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,

                ),


              ),
            ],
          ),
        ),
      );


  Widget buildColoredCard3() =>
      Card(
        shadowColor: Colors.red,
        elevation: 8,
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.redAccent, Colors.red],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Colored card',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 50),
              Text(
                'This card is rounded and has a gradient',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,

                ),


              ),
            ],
          ),
        ),
      );

}

Answer 1

//use this method for the search and let me know if it's work

Widget buildSearchInput() => Container(
    decoration: BoxDecoration(
        color: Colors.grey[200], borderRadius: BorderRadius.circular(20)),
    child: Padding(
      padding: const EdgeInsets.only(left: 10.0, right: 20),
      child: Row(
        children: [
          Icon(
            Icons.search,
            size: 30,
            color: Colors.grey,
          ),
          Flexible(
            child: TextField(
              decoration: InputDecoration(border: InputBorder.none),
            ),
          ),
        ],
      ),
    ),
  );