TextDecorationStyle.dotted also adopted by later Widgets-CodePudding

In my Flutter app, I have a few CheckboxListTiles and for two of them, I want the text written next to the checkboxes to be underlined with a dotted line. Therefore I have set decorationStyle: TextDecorationStyle.dotted for the TextStyle of the Text Widgets which are the children of the CheckboxListTiles. The first CheckboxListTile and its text look as I want it, but the tick of the second CheckboxListTile is also dotted, even though I have not defined that anywhere.

Why is it that way and how can I fix this issue?

Here is a code example:

CheckboxListTile(
  contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: DesignValues.paddingSm),
  activeColor: AppColors.secondary,
  checkColor: Colors.white,
  title: GestureDetector(
    onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => PrivacyPolicyReader())),
    child: Text(
      "Privacy Policy",
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.normal,
        fontStyle: FontStyle.italic,
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dotted,
        fontSize: 14,
      ),
    ),
  ),
  value: acceptedPrivacy,
  onChanged: (value) => setState(() => acceptedPrivacy = value),
  controlAffinity: ListTileControlAffinity.leading,
),
CheckboxListTile(
  contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: DesignValues.paddingSm),
  activeColor: AppColors.secondary,
  checkColor: Colors.white,
  title: GestureDetector(
    onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => TermsOfServiceReader())),
    child: Text(
      "Terms of Service",
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.normal,
        fontStyle: FontStyle.italic,
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dotted,
        fontSize: 14,
      ),
    ),
  ),
  value: acceptedTerms,
  onChanged: (value) => setState(() => acceptedTerms = value),
  controlAffinity: ListTileControlAffinity.leading,
),

CodePudding user response：

Definitely strange behavior! After testing around, I found that wrapping each CheckboxListTile widget with the Material widget "fixes" the issue.

For example:

Material(
  color: Colors.transparent,
  child: CheckboxListTile(
    // rest of code
  )
),

Not sure exactly what's causing this behavior!