need to use Expanded() on CheckBoxListTile()

Question

[![enter image description here][1]][1][![enter image description here][2]][2]Below is the code of my CheckBoxListTile().It is working well but when i pass long Text . it doesn't show. I don't know what is wrong with my code. I tried to put Expanded() but still it is not working.

the result of my debug is i have used SizedBox() to maintain vertial gap. if i remove that i can put Expanded() but i want to create a beautiful looking CheckBoxListTile() with a proper left and vertial gap which can show long text too.

Please help me resolve this.

Thanks in advance

return MaterialApp( home: Scaffold(
  
  body: Column(children:[
    
     ListView.builder(
      shrinkWrap: true,
      itemCount: 4,
      itemBuilder: (BuildContext context, index) {
        List listValues = [
          'index 0 ',
             'This is a very long text sdf sdfsdfsdfsdfsdsdfsdfsdf sdfsdf sdf sdf sdf sdfsd fsdf sdfsdfs sdfsdfsdf sdf sdf sdfs df sdfsdf sdfsdf it is the end of very long text'
                ];

        return StatefulBuilder(
          builder: (
            BuildContext context,
            StateSetter setState,
          ) {
            return Padding(
              padding: const EdgeInsets.only(
                left: 8.0,
                top: 0,
                bottom: 0,
              ),
              child: SizedBox(
                height: 24, // to change vertical padding, this is //causing issue while using Expanded()
                child: Transform.translate(
                  offset: const Offset(
                    -60, // to change left padding
                    0,
                  ),
                  child: Transform.scale(
                    scale: 0.90,
                    child: Theme(
                      data: ThemeData(
                        unselectedWidgetColor: Colors.black12.withOpacity(0.3),
                      ),
                      child: CheckboxListTile(
                       
                        visualDensity: const VisualDensity(
                            horizontal: VisualDensity.minimumDensity,
                            vertical: VisualDensity.minimumDensity),
                        //  selected: true,
                        value: true,
                        controlAffinity: ListTileControlAffinity.leading,
                        // selected: checkSelected4CheckBox(mySnapshot, index),
                        dense: true,
                        title: Transform.translate(
                          offset: const Offset(-16, -1),
                          child: Transform.scale(
                            scale: 1,
                            child: Text(
                              listValues[2],
                            
                            ),
                          ),
                        ),

                        onChanged: (value) {
                         
                        },
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        );
      },
    )
    ]
     )));


  [1]: https://i.stack.imgur.com/tiItV.png

eamirho3ein · Answer

Try this:

Padding(
          padding: const EdgeInsets.only(
            left: 8.0,
          ),
          child: Theme(
            data: ThemeData(
              unselectedWidgetColor: Colors.black12.withOpacity(0.3),
            ),
            child: CheckboxListTile(
              contentPadding: EdgeInsets.zero,
              visualDensity: VisualDensity(horizontal: -4, vertical: -4),
              value: true,
              controlAffinity: ListTileControlAffinity.leading,
              // selected: checkSelected4CheckBox(mySnapshot, index),
              dense: true,
              title: Text(
                'listValues[1] as dasdasd as das das das dasdasdd a sd asdasdas da sdadsasda',
              ),

              onChanged: (value) {},
            ),
          ),
        )

Or if that not what you want, you can use custom one like this:

GestureDetector(
            onTap: () {},
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 8),
                  height: 24,
                  width: 24,
                  child: Checkbox(value: false, onChanged: (value) {}),
                ),
                Expanded(
                    child: Text(
                  'listValues[1] as dasdasd as das das das dasdasdd a sd asdasdas da sdadsasda',
                ))
              ],
            ),
          ),

The image below show result, the first on is custom one and the second one is the CheckboxListTile:

Mobin Ansar · Answer

Check This is working fine:

   import 'dart:ffi';

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

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

  @override
  State createState() => _CheckBoxesState();
}

class _CheckBoxesState extends State {
  static int count = 0;
  List listValues = [
    'index $count ',
    'This is a very long text sdf sdfsdfsdfsdfsdsdfsdfsdf sdfsdf sdf sdf sdf sdfsd fsdf sdfsdfs sdfsdfsdf sdf sdf sdfs df sdfsdf sdfsdf it is the end of very long text'
  ];
  bool isCheck = true;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Column(children: [
        ListView.builder(
          shrinkWrap: true,
          itemCount: 4,
          itemBuilder: (BuildContext context, index) {
            return StatefulBuilder(
              builder: (
                BuildContext context,
                StateSetter setState,
              ) {
                return Transform.scale(
                  scale: 1,
                  child: Theme(
                    data: ThemeData(
                      unselectedWidgetColor: Colors.black12.withOpacity(0.3),
                    ),
                    child: CheckboxListTile(
                      visualDensity: const VisualDensity(
                          horizontal: VisualDensity.minimumDensity,
                          vertical: VisualDensity.maximumDensity),
                      //  selected: true,
                      value: isCheck,
                      controlAffinity: ListTileControlAffinity.leading,

                      // selected: checkSelected4CheckBox(mySnapshot, index),
                      dense: true,
                      title: Transform.translate(
                        offset: const Offset(-9, -3),
                        child: Transform.scale(
                          scale: 1,
                          child: Column(
                            children: [
                              index == 0
                                  ? Text(
                                      listValues[1],
                                    )
                                  : Text(
                                      listValues[0],
                                    ),
                            ],
                          ),
                        ),
                      ),

                      onChanged: (value) {
                        print("onchange is called");
                        setState(() {
                          count++;
                          isCheck = value!;
                        });
                      },
                    ),
                  ),
                );
              },
            );
          },
        )
      ])),
    );
  }
}

Sulaymon Ne'matov · Answer

If you remove the SizedBox() and give the padding to the left and top/bottom, no error will occur no matter how long the text is, and the CheckboxListTile will also stand out.

ListView.builder(
    shrinkWrap: true,
    itemCount: 4,
    itemBuilder: (BuildContext context, index) {
      List listValues = [
        'index 0 ',
        'This is a very long text sdf sdfsdfsdfsdfsdsdfsdfsdf sdfsdf sdf sdf sdf sdfsd fsdf sdfsdfs sdfsdfsdf sdf sdf sdfs df sdfsdf sdfsdf it is the end of very long text'
      ];

      return StatefulBuilder(
        builder: (
            BuildContext context,
            StateSetter setState,
            ) {
          return Padding(
            padding: const EdgeInsets.only(
              left: 8.0,
              top: 8.0,
              bottom: 0,
            ),
            child: Transform.translate(
              offset: const Offset(
                -60, // to change left padding
                0,
              ),
              child: Transform.scale(
                scale: 0.90,
                child: Theme(
                  data: ThemeData(
                    unselectedWidgetColor: Colors.black12.withOpacity(0.3),
                  ),
                  child: CheckboxListTile(
                    visualDensity: const VisualDensity(
                        horizontal: VisualDensity.minimumDensity,
                        vertical: VisualDensity.minimumDensity),
                    //  selected: true,
                    value: true,
                    controlAffinity: ListTileControlAffinity.leading,
                    // selected: checkSelected4CheckBox(mySnapshot, index),
                    dense: true,
                    title: Transform.translate(
                      offset: const Offset(-16, -1),
                      child: Transform.scale(
                        scale: 1,
                        child: Text(
                          listValues[1],

                        ),
                      ),
                    ),

                    onChanged: (value) {

                    },
                  ),
                ),
              ),
            ),
          );
        },
      );
    },
  )

need to use Expanded() on CheckBoxListTile()

3 Answers