why I got Another exception was thrown: Incorrect use of ParentDataWidget.?

Question

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

Answer 1

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.

Answer 2

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