Hello I'm trying to create a widget of smoothPageIndicator for the introduction of my page. The screen contain picture, title and description. but an exception occured Another exception was thrown: Incorrect use of ParentDataWidget.
this is the code :
@override
Widget buildView() {
var size = MediaQuery.of(context).size;
var textTheme = Theme.of(context).textTheme;
return SafeArea(
child: Scaffold(
floatingActionButton: isSelected
? FloatingActionButton(
backgroundColor: Colors.deepPurple,
onPressed: () {},
child: const Icon(Icons.arrow_forward),
)
: null,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
centerTitle: true,
elevation: 0),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(models[currentIndex].imgAssetAddress),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken),
),
),
child: ClipRRect(
child: Expanded(
flex: 1,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 500,
child: PageView.builder(
onPageChanged: (index) {
setState(() {
currentIndex = index;
});
},
controller: _controller,
itemCount: models.length,
itemBuilder: (BuildContext context, int index) {
currentIndex = index;
return GestureDetector(
onTap: () {
setState(() {
if (isSelected == false) {
isSelected = true;
} else {
isSelected = false;
}
});
},
child: Padding(
padding: const EdgeInsets.only(
top: 20, left: 30, right: 30, bottom: 15),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.white,
border: isSelected
? Border.all(
width: 4,
color: Colors.deepPurple)
: null),
child: Column(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(models[index]
.imgAssetAddress),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(15),
),
margin: const EdgeInsets.all(10),
height:
MediaQuery.of(context).size.height /
2.4,
),
Expanded(
child: Text(
models[index].city,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Expanded(
child: Text(
models[index].description,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.grey[600],
),
)),
),
],
),
),
),
);
}),
),
SmoothPageIndicator(
controller: _controller,
count: models.length,
),
currentIndex == 3
/// GET STARTED BTN
? TextButton(
onPressed: (() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BleScanWindow()),
);
}),
child: const Text("Get Started",
style: TextStyle(color: Colors.blue)),
)
/// SKIP BTN
: SkipBtn(
size: size,
textTheme: textTheme,
onTap: () {
setState(() {
_controller.animateToPage(3,
duration:
const Duration(milliseconds: 1000),
curve: Curves.fastOutSlowIn);
});
})
],
),
My question is how to edit this code to get a clean code and a performant response ? Thanks in advance for your help
CodePudding user response：
As mentioned, Expanded and Flexible widgets can only be used in Rows and Columns. I noticed that further down you are also using an Expanded inside a Padding widget:
Padding(
padding: const EdgeInsets.all(8.0),
child: Expanded( //// <--- problem
child: Text(
models[index].description,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
color: Colors.grey[600],
),
)),
),
CodePudding user response：
In your source code:
child: ClipRRect(
child: Expanded( //// <--- problem
flex: 1,
child: BackdropFilter(
Here you are using an Expanded widget inside a ClipRRect, which is causing the issue you are seeing.
Expanded is a ParentDataWidget that only works inside a Flex (like Row or Column widget), it cannot be used as a child to a ClipRRect widget like you did.