我试图在图像中实现类似的效果。 但是当我尝试这样做时，出现了这个错误。
应用父数据时抛出以下断言: 错误使用 ParentDataWidget。
ParentDataWidget Expanded(flex: 1) 想要将 FlexParentData 类型的 ParentData 应用到 RenderObject，该 RenderObject 已设置为接受不兼容类型 ParentData 的 ParentData。
然后屏幕变灰了。
到目前为止我所做的是:-
GestureDetector(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Detailedview(id)));
},
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5), //color of shadow
spreadRadius: 1, //spread radius
blurRadius: 1,
// blurStyle: BlurStyle.normal,
// blur radius
offset: const Offset(0, 0),
),
],
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
margin: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 5),
width: 190.0,
child: Stack(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//image
Container(
height: MediaQuery.of(context).size.height * 0.145,
width: MediaQuery.of(context).size.width * 0.9,
// height: MediaQuery.of(context).size.height * 0.09,
// width: MediaQuery.of(context).size.width * 0.35,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(15)),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
"http://192.168.20.52:8081/uploads/" + image)),
),
),
//black shadow
Container(
height: MediaQuery.of(context).size.height * 0.145,
width: double.infinity,
// height: MediaQuery.of(context).size.height * 0.09,
// width: MediaQuery.of(context).size.width * 0.35,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(15)),
gradient: LinearGradient(
colors: [Colors.black.withOpacity(0.4), Colors.transparent],
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter),
),
),
//book mark
GestureDetector(
onTap: () async {
if (bookmark == "False") {
await makebookmark(userid, id);
}
if (bookmark == "True") {
await deletebookmark(userid, id);
}
setState(() {
popularpackages = fetchpopularpackagebyid(userid);
});
},
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.115,
left: MediaQuery.of(context).size.width * 0.35),
child: Container(
height: 44,
width: 44,
decoration: BoxDecoration(
color: Colors.grey[300]?.withOpacity(0.6),
borderRadius: const BorderRadius.all(Radius.circular(50)),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
decoration: BoxDecoration(
color: bookmark == "False"
? Colors.white
: const Color(Const.secondary),
borderRadius:
const BorderRadius.all(Radius.circular(50)),
),
child: Icon(
Icons.bookmark_add,
color: bookmark == "False"
? const Color(Const.secondary)
: Colors.white,
),
),
),
)),
),
//place name
Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.16, left: 10),
child: Text(
package,
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: GoogleFonts.lato(
color: Colors.black,
textStyle: Theme.of(context).textTheme.headline4,
fontSize: 14,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
),
),
),
//district
Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.180, left: 10),
child: Align(
alignment: Alignment.centerLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Icon(
Icons.location_on_outlined,
size: 20,
color: Color(Const.secondary),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.18,
child: Text(
tourPlace,
overflow: TextOverflow.ellipsis,
// 'Kochi',
style: GoogleFonts.spartan(
color: const Color(Const.secondary),
textStyle:
Theme.of(context).textTheme.headline4,
fontSize: 12,
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
),
),
),
),
],
),
//price
Padding(
padding: const EdgeInsets.only(right: 15),
child: Text(
'\$ ' + rate,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.spartan(
color: const Color(Const.secondary),
textStyle: Theme.of(context).textTheme.headline4,
fontSize: 12,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
),
),
],
),
),
),
//book now
Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Booknow(id)),
);
},
child: Container(
height: 25,
width: 70,
decoration: const BoxDecoration(
color: Color(Const.secondary),
borderRadius: BorderRadius.all(Radius.circular(25)),
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(0.0),
child: Text(
'Book Now',
style: GoogleFonts.spartan(
color: Colors.white,
textStyle:
Theme.of(context).textTheme.headline4,
fontSize: 10,
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
),
),
),
],
),
)),
),
)
],
),
),
);
最佳答案
试试下面的答案希望对你有帮助: DefaultTabController & TabBar SingleTickerProviderStateMixin
在这里，您使用 StateFulWidget 和 SingleTickerProviderStateMixin，如下所示
import 'package:flutter/material.dart';
class Search extends StatefulWidget {
const Search({Key? key}) : super(key: key);
@override
State<Search> createState() => _SearchState();
}
class _SearchState extends State<Search> with SingleTickerProviderStateMixin {
TabController? _tabController;
@override
void initState() {
_tabController = new TabController(length: 4, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 150,
child: Center(
child: Text(
'Your Widget if you want',
),
),
color: Colors.blue,
),
TabBar(
unselectedLabelColor: Colors.black,
labelColor: Colors.red,
tabs: [
Tab(
icon: Icon(Icons.person),
),
Tab(
icon: Icon(
Icons.add,
),
),
Tab(
icon: Icon(
Icons.deck,
),
),
Tab(
icon: Icon(
Icons.child_care,
),
),
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
Expanded(
child: TabBarView(
children: [
Center(
child: Text(
'Screen 1',
),
),
Center(
child: Text(
'Screen 2',
),
),
Center(
child: Text(
'Screen 3',
),
),
Center(
child: Text(
'Screen 4',
),
),
],
controller: _tabController,
),
),
],
),
),
);
}
}
您的结果屏幕-> 
关于屏幕中间的 Flutter Tab View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69386711/