Custom checkBox align issue

[OpenJarvisAI]

I am using a custom checkBox config:

CheckBoxConfig getCheckBoxConfig(Function(bool?) onChanged) {
  return CheckBoxConfig(builder: (checked) {
    return Padding(
      // padding: const EdgeInsets.only(right: 8, left: 4),
      padding:  EdgeInsets.zero,
      child: SizedBox(
        width: 32,
        height: 32,
        child: Checkbox(
            value: checked,
            // value: true,
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            visualDensity: VisualDensity.standard,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(56)),
            side: BorderSide(color: Colors.grey.shade300, width: 2),
            activeColor: Colors.yellow,
            onChanged: onChanged),
      ),
    );
  });
}

I found no matter how I do, if I align the CheckBox with text (sizedBox 24) when I can not preceise click it on Mobile, if using width 32, the it can not align perfectly with text.

Help...

[asjqkkkk]

Hi @OpenJarvisAI , If CheckBoxConfig cannot meet your usage requirements, you may need to customize the InputNode to control its width, height, and padding. Refer to its original implementation: InputNode.

[OpenJarvisAI]

@asjqkkkk Hi, I customized the checkBox but I found the size are not center aligned compare to text after it

[asjqkkkk]

Hi @OpenJarvisAI , the Checkbox itself comes with padding by default. You need to remove the padding of the Checkbox itself first. Please refer to this link: https://stackoverflow.com/questions/53152386/flutter-how-to-remove-default-padding-48-px-as-per-doc-from-widgets-iconbut Alternatively, you can customize a Checkbox, for example:

Icon(
      checked ? Icons.check_box : Icons.check_box_outline_blank,
      size: 20,
    )

[OpenJarvisAI]

@asjqkkkk I have tried using sizedBox constraint it, but then the question would be using hand to touch it on mobile is not accurate any more.

I don't know it's the span align issue in markdown_widget or checkbox it self, but at least in my app other place using checkbox, not even how tiny it is, it can be touched correctly.

I hope you would take some test on it. thanks.

[asjqkkkk]

@OpenJarvisAI Have tried to update the checked value?

just like this:

if you use the checked value to display Checkbox, you need update it after the Checkbox been touched

or hold the checked value in other ways, such as:

  return CheckBoxConfig(builder: (v) {
    return Checkbox(
            value: DataHolder().checked,
            onChanged: (v) {
               DataHolder().checked = !DataHolder().checked;
               setState((){});
            } ),
      ),;

[OpenJarvisAI]

@asjqkkkk Mine would be a little complicated, I placed whole markdownwidget in a chat bubble which can be cosntrainted

this my custom config:

CheckBoxConfig getCheckBoxConfig(Function(bool?) onChanged) {
  return CheckBoxConfig(builder: (checked) {
    return Padding(
      padding: const EdgeInsets.only(right: 8, left: 4),
      // padding:  EdgeInsets.zero,
      child: SizedBox(
        width: 25,
        height: 25,
        child: Checkbox(
            value: checked,
            // value: true,
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            visualDensity: VisualDensity.standard,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(56)),
            side: BorderSide(color: Colors.grey.shade300, width: 2),
            activeColor: Colors.yellow,
            onChanged: onChanged),
      ),
    );
  });
}

As you can see,

no matter I adjust it, the checkbox always have issues

[OpenJarvisAI]

BTW, I found a bug , the checkbox config can only have a callback, then if I have a list of checkbox, how to know which checkbox clicked?

[asjqkkkk]

@OpenJarvisAI 我们还是用中文来交流吧

• 首先，你现在的做法是，将一定格式的字符串转换为markdown展示
  • 这其中包括了将 - [ ] 和 - [x]转换为Checkbox
  • 就像下面这样：
  • [ ] aa
  • [x] bb
• 然后你会发现，它在你Preview状态的时候是不可点击的，为什么呢？在解释这个问题之前你需要了解“数据驱动UI”的概念
  • 如果你希望可以像一个Checkbox Widget表现的那样，那么你需要在点击之后，将原本的字符串数据 - [ ]修改为 - [x],或者反过来修改。
• 还有后面的一个问题，发现一列列表里面有许多的Checkbox，你不知道被点击的是哪一个，你认为这是一个bug
  • 这并不是一个bug，而是一个不存在的功能，要实现这个功能也不难，还是要自定义
  • 至于如何实现，还是请参考我花费了许多时间写的【在线demo+README+源码】，而这样也能帮助你快速上手和解决问题
  • 如果完全指望开发者来帮忙解决本身不存在的功能，或者某些特定的需求，这是一件不太靠得住的事情，所以还是请你参考上面所写
  • 希望进一步的研究后，可以解决你的问题

[OpenJarvisAI]

@asjqkkkk 我认为你误解我的意思，我的UI checkbox可以点击，只是点击的位置并不在checkbox的正中央，偏下。我也不知道为啥。我也已经实现了点击更新数据，可以check，只是目前这个没有对齐的问题很苦恼

我的UI你可以看到，checkbox跟后面的文字是扭曲的，显然是没有对齐，至于为什么没有对齐，还不知道。

第二点，确实不能称之为bug，这个可以被认为是一个feature request，看起来在设计上，存在一些缺陷（或者说不足）。

如果能有一些实例就更好了，这个wdiget我认为已经在flutter里面一等一的库了，虽然我看到了很多不足，但其他库更是垃圾的要命。

如果有一些更完善的实例，吧这个功能做的更强大，可能实用性上会更好一些。

关于没有跟文字对齐这个问题，我感觉跟文字的size有一些关联。怎么调试都不合适，比较奇怪

[asjqkkkk]

@OpenJarvisAI 过于Checkbox的偏移问题，可以参考一下这个https://stackoverflow.com/questions/53152386/flutter-how-to-remove-default-padding-48-px-as-per-doc-from-widgets-iconbut

Checkbox这个Widget本身自带一些padding，想要完全的去掉它可以参考一下链接中的解决方案 不过我建议是不要使用Checkbox，因为它在padding这一块不可控，可以尝试结合InkWell+Icon或者Gesture+Icon来自定义一个Checkbox

[OpenJarvisAI]

这里面提供的方案就是SizedBox，我已经是使用了sizedbox，不行。 无法按照期望的调试。

另外请问一下，我如果想在markdown的文字末尾append一个widget，有办法比较好的对齐么？

得是inline，跟text要比较好的连接， 类似于telegram，聊天文字，末尾加一个时间和已读的widget。目前我试了在外面加column和row是不可能的，会浪费很多空间

[asjqkkkk]

这里面提供的方案就是SizedBox，我已经是使用了sizedbox，不行。 无法按照期望的调试。

另外请问一下，我如果想在markdown的文字末尾append一个widget，有办法比较好的对齐么？

得是inline，跟text要比较好的连接， 类似于telegram，聊天文字，末尾加一个时间和已读的widget。目前我试了在外面加column和row是不可能的，会浪费很多空间

你说的这个问题，本质上其实已经和markdown_widget关系不大了

不过刚好现在有空，所以我回复一下

如果你想要的效果是【aaaaaaaaaaaaaaaaa xxx】可以参考README中“Custom tag implementation”的部分

如果你想实现的是类似于飞书、钉钉那种，一个消息块后面跟着一个【已读或未读】，那应该是就是通过Row(MarkdownBlock + YourWidget)的形式

不过可能上面建议都与你实际的需求不一致，所以如果不一致的话还是希望请你自己再另想办法，毕竟与package关系不大的问题我不会投入太多额外的精力与时间，它对于其他人搜索issue解决问题也没有太大帮助

[OpenJarvisAI]

跟markdown关系不大，但是要开拓更广阔的应用前景，拼接span似乎是不可避免的， Row是不行的，必须是span的方式连接，我还是建议你多听一点用户反馈的意见，否则库走不长远，逐渐也就没有人用了。