Home > Net >  How to bold a part of the text?
How to bold a part of the text?

Time:06-23

What should I add if I would like to bold just these particular text "Tutor Description: ", "Tutor Email: ", "Phone Number: ", "Date Register: ", "Subject List: ".

               Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                 Text("Tutor Description: \n"
                   tutorList[index].tutorDescription.toString(),),

                 Text("Tutor Email:  "  
                    tutorList[index].tutorEmail.toString()),

                 Text("Phone Number "  
                     tutorList[index].tutorPhone.toString()),

                 Text("Date Register: "   df.format(DateTime.parse(
                         tutorList[index].tutorDatereg.toString()))),

                 Text("Subject List: "  tutorList[index].subjectsName.toString()),
               ]),

CodePudding user response:

You can try with RichText

Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
              text: 'Tutor Description:\n ',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            TextSpan(
              text: 'tutorDescription',
              style: TextStyle(fontSize: 20),
            ),
          ],
        )
      ),
    ])

Complete Source code

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        itemWithValue("Tutor Description:\n", "Montly"),
      ],
    );
  }

  Widget itemWithValue(String item, String value) {
    return RichText(
        text: TextSpan(
      children: <TextSpan>[
        TextSpan(
          text: item,
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        TextSpan(
          text: value,
          style: TextStyle(fontSize: 20),
        ),
      ],
    ));
  }
}

CodePudding user response:

Hey you can use RichText instead of simple Text widget if you want to make some part bold of text.

For Example -

Expected Result = "This is bold string";

 RichText(
        text: TextSpan(
          style: TextStyle(fontWeight: FontWeight.normal),
          children: [
            TextSpan(text: "This is "),
            TextSpan(text: "Bold ", style: TextStyle(fontWeight: FontWeight.bold)),
            TextSpan(text: "string"),
          ]
        ),
    );

For more details - RichText

  • Related