Как поместить контейнер поиска в мой Home.dart? - PullRequest
0 голосов
/ 09 июля 2020

У меня есть два файла дротика: Home.dart и menuUser.dart. Я следовал некоторому руководству по разработке своих приложений. Моя проблема сейчас в том, что я не знаю, как разместить панель поиска или контейнер в моем Home.dart, потому что у меня уже есть appBar внутри моего menuUser.dart. Я выяснил, что если я помещу appBar в свой Home.dart, мои приложения будут иметь двойную панель вкладок вверху.

Вот мой menuUser.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:myapp/model/api.dart';
import 'package:myapp/view/home.dart';
import 'package:myapp/view/budget.dart';
import 'package:myapp/view/locationMap.dart';
import 'package:myapp/view/profile.dart';
import 'package:shared_preferences/shared_preferences.dart';


class MenuUsers extends StatefulWidget {
  final VoidCallback signOut;
  MenuUsers(this.signOut);
  @override
  _MenuUsersState createState() => _MenuUsersState();
}


class _MenuUsersState extends State<MenuUsers> {
  
  signOut(){
    setState((){
      widget.signOut();
    });
  }


  String name = "";
  TabController tabController;

  getPref()async{
    SharedPreferences preferences = await SharedPreferences.getInstance();
    setState(() {
      name = preferences.getString("name");
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getPref();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
          child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink,
          actions: <Widget>[
            IconButton(
              onPressed: (){
                signOut();
              },
              icon: Icon(Icons.lock_open),
            )
          ],
        ),
        body: TabBarView(
          children: <Widget>[
            Home(),
            Budget(),
            LocationMap(),
            Profile(),
          ],
          ),
        bottomNavigationBar: TabBar(
          labelColor: Colors.pink,
          unselectedLabelColor: Colors.grey,
          indicator: UnderlineTabIndicator(
            borderSide: BorderSide(
              style: BorderStyle.none
            )
          ),
          tabs: <Widget>[
            Tab(
              icon: Icon(Icons.home),
              text: "Home",
            ),
            Tab(
              icon: Icon(Icons.shopping_basket),
              text: "Budget",
            ),
            Tab(
              icon: Icon(Icons.map),
              text: "Location",
            ),
            Tab(
              icon: Icon(Icons.person),
              text: "Profile",
            )
          ],
        ),
      ),
    );
  }
}

, а вот my Home.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:myapp/model/UserAttractionModel.dart';
import 'package:myapp/model/categoryProductModel.dart';
import 'package:myapp/network/network.dart';
import 'package:myapp/view/productDetail.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var loading = false;
  List<CategoryProductModel> listCategory = [];
  getProductWithCategory() async{
    setState(() {
      loading = true;
    });
    listCategory.clear();
    final response = await http.get(NetworkUrl.getProductCategory());
    if(response.statusCode == 200){
      final data = jsonDecode(response.body);
      print(data);
      setState(() {
        for(Map i in data){
          listCategory.add(CategoryProductModel.fromJson(i));
        }
        loading = false;
    });
    } else {
      setState(() {
        loading = false;
      });

    }

  }

  var filter = false;
  
  List<UserAttractionModel> list =[];
  getAttraction()async{
    setState(() {
      loading = true;
    });
    list.clear();
    final response = await http.get(NetworkUrl.getAttraction());
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      print(data);
      setState(() {
        for (Map i in data) {
          list.add(UserAttractionModel.fromJson(i));
        }
        loading= false;
      });
    } else {
      setState(() {
        loading= false;
      });
    }
  }

  Future<void> onRefrash() async{
    getAttraction();
    getProductWithCategory();
    setState(() {
      filter = false;
    });
  }

  int index = 0;
  

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getAttraction();
    getProductWithCategory();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: loading ? Center(
        child: CircularProgressIndicator(),
      )
      : RefreshIndicator(
        onRefresh: onRefrash,
        child: ListView(
          children: <Widget>[
            //Kategori attraction@produk
            Container(
              height: 50,
              child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: listCategory.length,
                itemBuilder: (context,i){
                  final a = listCategory[i];
                  return InkWell(
                    onTap: (){
                      setState(() {
                        filter = true;
                        index = i;
                        print(filter);
                      });
                    },
                    child: Container(
                      margin: EdgeInsets.only(left: 20, right: 1),
                      padding: EdgeInsets.all(15),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.deepOrangeAccent
                      ),
                      child: Text(
                        a.categoryName, 
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        )
                      ),
                    ),
                  );
                },
              ),
            ),
          filter 
            ? listCategory[index].attraction.length == 0
              ? 
                Container(
                  height: 100,
                  padding: EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("Sorry Item on this category not available",
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18),
                       ),
                    ],
                  ),
                )
            : GridView.builder(
                shrinkWrap: true,
                physics: ClampingScrollPhysics(),
                padding: EdgeInsets.all(10),
                itemCount: listCategory[index].attraction.length,
                gridDelegate:
                 SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: 15,
                  crossAxisSpacing: 8
              ),
              itemBuilder: (context,i){
                final a = listCategory[index].attraction[i];
                return InkWell(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(
                    builder: (context) => ProductDetail(a)
                    )
                  );
                },
                  child: Container(
                    padding: EdgeInsets.all(10),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Expanded
                        (child: Image.network("http://192.168.42.48/myapp/upload/"+ a.image,
                          width: 100.0,
                          fit: BoxFit.cover,
                          height: 180,
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text("${a.attractionName}", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.pink, fontSize: 18),),
                        Text(" RM ${a.price}", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.brown, fontSize: 16),
                        ),
                      ],
                    ),
                  ),
                );
              }
            ) : GridView.builder(
                shrinkWrap: true,
                physics: ClampingScrollPhysics(),
                padding: EdgeInsets.all(10),
              itemCount: list.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 15,
                crossAxisSpacing: 8
              ),
              itemBuilder: (context,i){
                final a = list[i];
                return InkWell(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(
                    builder: (context) => ProductDetail(a)));
                  },
                  child: Container(
                    padding: EdgeInsets.all(10),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Expanded
                        (child: Image.network("http://192.168.42.48/myapp/upload/"+ a.image,
                          width: 100.0,
                          fit: BoxFit.cover,
                          height: 180,
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text("${a.attractionName}", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.pink, fontSize: 18),),
                        Text(" RM ${a.price}", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.brown, fontSize: 16),
                        ),
                      ],
                    ),
                  ),
                );
              }
            ),
            //produk
          ],
        ),
      )
    );
  }
}

Вот моя страница пользователя меню, и я хочу разместить панель поиска вверху страницы, вероятно, рядом с кнопкой выхода:

Страница пользователя меню

1 Ответ

0 голосов
/ 09 июля 2020

Обратитесь к этому пакету для строки поиска во флаттере: https://pub.dev/packages/flappy_search_bar

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...