How to put Search container inside my Home.dart? - flutter

Question

I have two dart file which are Home.dart and menuUser.dart. I've been following some tutorial in developing my apps. My problem now is, I don't know how to put my Search bar or container in my Home.dart because I already have appBar inside my menuUser.dart. I figure out if I put appBar inside my Home.dart, my apps will have double tab bar at the top.
Here is my 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",
)
],
),
),
);
}
}
and here is 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
],
),
)
);
}
}
Here is my menu user page and I want to put Search bar at the top of the page probably beside the logout button: