Flutter listview.separated inside SingldeChildScrollVİew

Question

I am developing an app with flutter and I am getting an error about height.

I have a listview.separated and I have a SingleChildScrollView. I am getting flex error.

This is my file to align widgets inside Scaffold and SafeArea. I have a file for runApp but it is not important for the question.

    class ProfilePageC extends StatelessWidget {
  const ProfilePageC({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
              children: [
               AboutTopBarW(), // It has not listview
               ImageFieldW(),  // It has no listview
               PercentsW(),    //It has no listview
               HomeArticleList2W() //It has a listview.separated  
            ],
          ),
        ),
      ),
    );
  }
}

this is my file for listview.separated widget.

  class HomeArticleList2W extends ConsumerWidget {
  const HomeArticleList2W({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final futureCatFacts = ref.watch(multiFutureArticleProvider);
    return Expanded(
      child: futureCatFacts.when(
        loading: () => const ShimmerHomeW(),
        error: (err, stack) => Text('Error: $err'),
        data: (data) {
      final decodedData = json.decode(data.body);
      return ListView.separated(
        separatorBuilder: (BuildContext context, int index) {
          if (index % 3 == 0) {
            return const Divider();
          }
          return const Divider();
        },
         shrinkWrap: true,
         physics: NeverScrollableScrollPhysics(),
        itemCount: decodedData.length ,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(
              left: 20,
              right: 20,
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Image.network(
                      decodedData[index]['largeImage'].toString(),
                      fit: BoxFit.cover,
                      height: 70,
                      width: 70,
                    )),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        decodedData[index]['title'],
                        style: const TextStyle(
                            fontSize: 15, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          const Icon(
                            Icons.av_timer_sharp,
                            size: 20,
                          ),
                          Text(decodedData[index]['date']),
                        ],
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 5,
                ),
                const Icon(Icons.bookmark_border),
              ],
            ),
          );
        },
      );
        },
      ),
    );
  }
}

There is no error when I erase HomeArticleList2W() from the SingleChildScrollView. Therefore I thnink the error consist of the listview.separated. How to solve this problem.

Answer 1

Remove the expanded widget and add mainAxisSize min

Column(
  mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        decodedData[index]['title'],
                        style: const TextStyle(
                            fontSize: 15, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          const Icon(
                            Icons.av_timer_sharp,
                            size: 20,
                          ),
                          Text(decodedData[index]['date']),
                        ],
                      ),
                    ],
                  ),