I am trying to show news from an API. I have fetched the API data and trying to show them in the screen. But while trying to do so, I am facing an exception. Here is my

home.dart

import 'package:flutter/material.dart';

import 'Export.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool isVisible = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        scrollDirection: Axis.horizontal,
        physics: const ClampingScrollPhysics(),
        children: [
          const ShowNewsPage(),
          // const Photos(),
          // const Champions(),
          // const EventsPage(),
        ],
      ),
    );
  }
}

and here is my shownews.dart code:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../Controller/NewsController.dart';
import 'Export.dart';

class ShowNewsPage extends StatefulWidget {
  const ShowNewsPage({Key? key}) : super(key: key);

  @override
  State<ShowNewsPage> createState() => _ShowNewsPageState();
}

class _ShowNewsPageState extends State<ShowNewsPage> {
  bool _init = true;
  bool _isLoadingNews = false;
  @override
  void didChangeDependencies() async {
    if (_init) {
      _isLoadingNews =
          await Provider.of<NewsController>(context, listen: false).getNews();
    }
    _init = false;
    setState(() {});
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    final news = Provider.of<NewsController>(context).allNews;
    if (!_isLoadingNews) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    } else {
      return Scaffold(
        body: ListView.builder(
          physics: const ScrollPhysics(),
          scrollDirection: Axis.vertical,
          itemCount: news.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return NewNewscardWidget(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              title: news[index].title!.rendered!,
              content: news[index].content!.rendered!,
              image: news[index].ogImage ?? [],
              id: news[index].id!,
              // authorName: news[index].author!,
              date: 'November 5, 2022',
            );
          },
        ),
      );
    }
  }
}

after using listview.builder I am getting this exception and I am also getting a blank page:

Vertical viewport was given unbounded height.

I tried using listview.builder to fetch the data but I am getting an exception and getting a blank page. Is there any way to show the data that I am trying to show.

CodePudding user response：

You are maybe using another building inside the card widget. please remove it.

and use this code:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

class NewNewscardWidget extends StatelessWidget {
  const NewNewscardWidget({
    Key? key,
    required this.width,
    required this.height,
    required this.date,
    required this.title,
    required this.id,
    required this.content,
    this.image,
    // required this.authorName
  }) : super(key: key);

  final double width;
  final double height;
  final int id;
  final String title;
  final List? image;
  final String date;
  final String content;

  // final int authorName;

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
        width: width,
        height: height,
        decoration: const BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey, //color of shadow
              spreadRadius: 0.5,
              blurRadius: 3,
              offset: Offset(0, 1),
              //first paramerter of offset is left-right
              //second parameter is top to down
            ),
          ],
        ),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Center(
                child: Container(
                  height: height * .40,
                  width: width,
                  child:
                  ListView.builder(
                      itemCount: image!.length,
                      itemBuilder: (context, i) {
                        return Image.network(
                          image![0].url,

                          fit: BoxFit.fill,
                        );
                      }),
                ),
              ),
              const SizedBox(
                height: 15,
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 5),
                child: Text(
                  title,
                  style: const TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.w800,
                    letterSpacing: 1,
                  ),
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Container(
                padding: const EdgeInsets.only(left: 5, right: 5),
                child: Html(
                  data: content.substring(0, 600)
                ),
                // child: Text(
                //   content,
                //   style: const TextStyle(
                //     fontSize: 16,
                //     fontWeight: FontWeight.w300,
                //     fontFamily: 'NunitoSans',
                //   ),
                // ),
              ),
              const SizedBox(
                height: 10,
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 5),
                child: Row(
                  children: [
                    const Text(
                      'By',
                      style: TextStyle(color: Colors.black45),
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    // Text(
                    //   ,
                    //   style: TextStyle(
                    //       fontWeight: FontWeight.w700,
                    //       color: Colors.black45),
                    // ),
                    const SizedBox(
                      width: 10,
                    ),
                    Text(date),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

and keep the rest same as before. That will work for sure.