Home > front end >  Flutter How to change container height based on the ListView items height?
Flutter How to change container height based on the ListView items height?

Time:08-19

I have a Container in this Container implemented Listview. I want to implement like that container height will take listview items height currently its hardcoded 150. I dont want to make it scrollable . Scaffold wraped with singlechildscrollview.If i remove container height that throw an error unbounded height.

Container(
                    height: 150,
                    color: Colors.red,
                    width: double.infinity,
                    child: FutureBuilder(
                        future: assesmentfuture,
                        builder:
                            (context, AsyncSnapshot<List<Assesment>> sn) {
                          if (sn.hasData) {
                            return ListView.builder(
                                itemCount: sn.data!.length,
                                itemBuilder: (context, index) {
                                  return Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 10),
                                    child: Container(
                                      color: Colors.green,
                                      child: Text(
                                        sn.data![index].text,
                                        style: GoogleFonts.roboto(
                                          fontSize: 14,
                                          fontWeight: FontWeight.w400,
                                        ),
                                        textAlign: TextAlign.justify,
                                      ),
                                    ),
                                  );
                                });
                          }
                          if (sn.hasError) {
                            return Center(
                              child: Text("Error"),
                            );
                          }

                          return Center(
                            child: CircularProgressIndicator(),
                          );
                        }),
                  )

CodePudding user response:

Tried wrapping the listView.builder in wrap, maybe it will work cause there isn't a definite solution cause you are using a listview.builder without axisDirection as you said you don't want to make it scrollable

CodePudding user response:

Column(
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
            width: double.infinity,
            child: FutureBuilder(
                future: assesmentfuture,
                builder:
                    (context, AsyncSnapshot<List<Assesment>> sn) {
                  if (sn.hasData) {
                    return ListView.builder(
                        itemCount: sn.data!.length,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 10),
                            child: Container(
                              color: Colors.green,
                              child: Text(
                                sn.data![index].text,
                                style: GoogleFonts.roboto(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w400,
                                ),
                                textAlign: TextAlign.justify,
                              ),
                            ),
                          );
                        });
                  }
                  if (sn.hasError) {
                    return Center(
                      child: Text("Error"),
                    );
                  }

                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }),
          ),
        )
      ],
    );

CodePudding user response:

You can include physics: NeverScrollableScrollPhysics(), on listView to disable the scrolling. I think you can just use Column in this case. Top level SingleChildScrollView will handle the overflow and scroll event.

Container(
  color: Colors.red, 
  child: FutureBuilder(
      future: assesmentfuture,
      builder: (context, AsyncSnapshot<List<Assesment>> sn) {
        if (sn.hasData) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              for(int i =0; i< sn.data!.length;i   )
              Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: Container(

CodePudding user response:

use should use shrinkwrap property of listview builder with setting its direction.

here is the code :

Container(
                height: Get.height,
                child: ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemCount: 10,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                   return yourWidget();
                      }))

CodePudding user response:

You can just use a Column instead of a ListView.

Instead of

ListView.builder(
    itemCount: sn.data!.length,
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.symmetric(
            horizontal: 10),
        child: Container(
          color: Colors.green,
          child: Text(
            sn.data![index].text,
            style: GoogleFonts.roboto(
              fontSize: 14,
              fontWeight: FontWeight.w400,
            ),
            textAlign: TextAlign.justify,
          ),
        ),
      );
    });

use

Column(
    children: [
      for (var assesment in sn.data!) Padding(
        padding: const EdgeInsets.symmetric(
            horizontal: 10),
        child: Container(
          color: Colors.green,
          child: Text(
            assesment.text,
            style: GoogleFonts.roboto(
              fontSize: 14,
              fontWeight: FontWeight.w400,
            ),
            textAlign: TextAlign.justify,
          ),
        ),
      );
    ]);
  • Related