Checkbox doest not display in ListView.builder - Flutter

Fash
January 3, 2023
190 views
1 vote
2 Answers

I got issue. The Checkbox not display in box. Refer below image

And this my code

Container(
    child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
            SizedBox(
                height: 105.0,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    // ignore: missing_return
                    itemBuilder: (context, index) {
                        Checkbox(
                            checkColor: Colors.blue,
                            value: _state[index] ?? false,
                            onChanged: (value) {
                                setState(() {
                                    _state[index] = value;
                                });
                                print(index);
                            },
                        );
                    }),
            ),
        ],
    )),

And when I add return checkbox it become like image below..

My main container code

child: Container(
    // Row(children: [
    // child: Row(children: [],),
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(25.0),
        boxShadow: [
            BoxShadow(color: Colors.grey[500], blurRadius: 3.0, spreadRadius: 1.0),
        ],
    ),
    width: data.size.width * 0.26,
    height: data.size.width * 0.26 * 1.2,
    padding: EdgeInsets.all(data.size.width * 0.02),
    child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
            Row(
                children: [
                    Container(
                        child: AvatarLetter(
                            size: 100,
                            backgroundColor: getBackColor(),
                            textColor: Colors.white,
                            fontSize: 40,
                            upperCase: true,
                            numberLetters: 3,
                            letterType: LetterType.Circular,
                            text: this.widget.inspect.insType,
                            backgroundColorHex: null,
                            textColorHex: null,
                        ),
                    ),
                    SizedBox(width: 10),
                    Container(
                        margin: EdgeInsets.all(10),
                        child: Row(
                            children: [
                                Align(
                                    // alignment: Alignment.topLeft,
                                    child: Column(
                                        children: [
                                            Text(
                                                'Cert No: ' + this.widget.inspectDetails.certId,
                                                textAlign: TextAlign.left,
                                                style: TextStyle(
                                                    color: Colors.black87,
                                                    fontSize: data.size.width * 0.025,
                                                    fontWeight: FontWeight.bold),
                                            ),
                                            Text(
                                                this.widget.inspect.insType ?? '',
                                                textAlign: TextAlign.left,
                                                style: TextStyle(
                                                    color: Colors.black87,
                                                    fontSize: data.size.width * 0.022,
                                                    fontWeight: FontWeight.bold),
                                            ),
                                            Text(
                                                DateFormat('dd MMMM yyyy')
                                                .format(DateTime.parse(this.widget.inspect.testDate))
                                                .toString(),
                                                textAlign: TextAlign.left,
                                                style: TextStyle(
                                                    color: Colors.grey[400],
                                                    fontSize: data.size.width * 0.02,
                                                    fontWeight: FontWeight.bold,
                                                ),
                                            ),
                                        ],
                                    ),
                                ),
                                // Spacer(flex: 1),
                            ],
                            // size: 60.0,
                        ),
                    ),
                    // Spacer(flex: 1),
                    Container(
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                                SizedBox(
                                    height: 105.0,
                                    child: ListView.builder(
                                        scrollDirection: Axis.horizontal,
                                        shrinkWrap: true,
                                        // ignore: missing_return
                                        itemBuilder: (context, index) {
                                            Checkbox(
                                                checkColor: Colors.blue,
                                                value: _state[index] ?? false,
                                                onChanged: (value) {
                                                    setState(() {
                                                        _state[index] = value;
                                                    });
                                                    print(index);
                                                },
                                            );
                                        }),
                                ),
                            ],
                        )),
                ],
            ),
        ],
    ),
),

Tags: dart flutter

Answers

Try the following code:

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(25.0),
    boxShadow: [
      BoxShadow(color: Colors.grey[500], blurRadius: 3.0, spreadRadius: 1.0),
    ],
  ),
  width: data.size.width * 0.26,
  height: data.size.width * 0.26 * 1.2,
  padding: EdgeInsets.all(data.size.width * 0.02),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          Container(
            child: AvatarLetter(
              size: 100,
              backgroundColor: getBackColor(),
              textColor: Colors.white,
              fontSize: 40,
              upperCase: true,
              numberLetters: 3,
              letterType: LetterType.Circular,
              text: this.widget.inspect.insType,
              backgroundColorHex: null,
              textColorHex: null,
            ),
          ),
          SizedBox(width: 10),
          Padding(
            padding: EdgeInsets.all(10),
            child: Column(
              children: [
                Text(
                  'Cert No: ' + this.widget.inspectDetails.certId,
                  textAlign: TextAlign.left,
                  style: TextStyle(color: Colors.black87, fontSize: data.size.width * 0.025, fontWeight: FontWeight.bold),
                ),
                Text(
                  this.widget.inspect.insType ?? '',
                  textAlign: TextAlign.left,
                  style: TextStyle(color: Colors.black87, fontSize: data.size.width * 0.022, fontWeight: FontWeight.bold),
                ),
                Text(
                  DateFormat('dd MMMM yyyy').format(DateTime.parse(this.widget.inspect.testDate)).toString(),
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Colors.grey[400],
                    fontSize: data.size.width * 0.02,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 105.0,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return Checkbox(
                      checkColor: Colors.blue,
                      value: _state[index] ?? false,
                      onChanged: (value) {
                        setState(() {
                          _state[index] = value;
                        });
                        print(index);
                      },
                    );
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ],
  ),
),

Your first issue is you forgot use return in itemBuilder and second issue is you forgot to use itemCount inside ListView.builder, try this:

ListView.builder(
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      itemCount: _state.length, // <---add this
      itemBuilder: (context, index) {
        return Checkbox( // <---add this
          checkColor: Colors.blue,
          value: _state[index] ?? false,
          onChanged: (value) {
            setState(() {
              _state[index] = value;
            });
            print(index);
          },
        );
      },
    )

Please signup or login to give your own answer.

Click here to cancel reply.

Checkbox doest not display in ListView.builder – Flutter

Answers