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

Question

want to add the bottom search bar and bottom icon bar using flutter in my home_dart page. can someone help me, please? already add 3 cards to the page. how can I add a search bar and bottom icon bar as shown in the picture? I'm trying to create a fashion app UI. I'm new to flutter. if someone can help me it would be great.

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

here I have add the bottom navigation bar but it throws the following error again.

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,
    
                    ),
    
    
                  ),
                ],
              ),
            ),
          );
    
    
      class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      int _selectedIndex = 0;
      const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
      const List<Widget> _widgetOptions = <Widget>[
      Text(
      'Index 0: Home',
      style: optionStyle,
      ),
      Text(
      'Index 1: Business',
      style: optionStyle,
      ),
      Text(
      'Index 2: School',
      style: optionStyle,
      ),
      Text(
      'Index 3: Settings',
      style: optionStyle,
      ),
      ];
    
      void _onItemTapped(int index) {
      setState(() {
      _selectedIndex = index;
      });
      }
    
      @override
      Widget build(BuildContext context) {
      return Scaffold(
      appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
      backgroundColor: Colors.red,
      ),
      BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
      backgroundColor: Colors.green,
      ),
      BottomNavigationBarItem(
      icon: Icon(Icons.school),
      label: 'School',
      backgroundColor: Colors.purple,
      ),
      BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
      backgroundColor: Colors.pink,
      ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
      ),
      );
      }
    
      }
    }

Answer 2

//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),
            ),
          ),
        ],
      ),
    ),
  );