Bold text in Flutter bulleted list - flutter-layout

Question

I have a page with a bulleted list. I'd like 3 of the list-items to contain some bold text. Not paragraphs that are all bold text, but paragraphs that contain 1 or 2 words in bold. For example,
I would like just this text to be bold.
In this second bulleted paragraph, I want these words to be bold.
In this third bulleted paragraph, I want these words in bold.
I'd really appreciate help. Here's my code:
import 'package:cordova/ui/contact/contact.dart';
import 'package:cordova/ui/home.dart';
import 'package:cordova/ui/information/license_page.dart';
import 'package:cordova/ui/widget/contact_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_windowmanager/flutter_windowmanager.dart';
import 'package:hexcolor/hexcolor.dart';
class NotesScreen extends StatefulWidget {
NotesScreen({Key? key}) : super(key: key);
#override
_NotesScreenState createState() => _NotesScreenState();
}
class _NotesScreenState extends State<NotesScreen> {
disableScreen() async {
await FlutterWindowManager.addFlags(FlutterWindowManager.FLAG_SECURE);
}
Text bold(String abc) {
return Text(abc,
style: TextStyle(
fontSize: 35,
fontFamily: 'RedHatDisplay',
fontWeight: FontWeight.bold));
}
#override
void initState() {
// TODO: implement initState
super.initState();
disableScreen();
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
decoration: const BoxDecoration(color: Colors.white),
height: 50,
alignment: Alignment.bottomCenter,
child: IconButton(
onPressed: () {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => const HomeScreen()),
(route) => false);
},
icon: const Icon(
Icons.home,
color: Colors.black,
size: 25,
)),
),
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: HexColor('#ffffff'),
child: SingleChildScrollView(
child: Column(children: [
Container(
decoration: BoxDecoration(color: HexColor('#008AD8')),
//height: MediaQuery.of(context).size.height * 0.7,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton.icon(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.arrow_back_ios_new,
color: Colors.white,
),
label: const Text(
"Back",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'RedHatDisplay',
fontWeight: FontWeight.bold),
)),
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ContactScreen()));
},
icon: const Icon(
Icons.mail,
color: Colors.white,
size: 25,
)),
],
),
const SizedBox(
height: 30,
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Text(
'Information',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontFamily: 'RedHatDisplay',
fontWeight: FontWeight.w600),
),
),
const SizedBox(
height: 10,
),
const SizedBox(
height: 30,
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: Column(
children: [
const UnorderedListItemBold(
"I would like just ", "this", "text to be bold."),
const UnorderedListItemBold(
"In this second bulleted paragraph, I want ",
"these words",
"to be bold."),
const UnorderedListItemBold(
"In this third bulleted paragraph, ",
"I want these words",
"in bold."),
UnorderedList(const [
"This paragraph has NO bold text.",
"Neither does this one.",
"And this paragraph is also plain text."
]),
],
))),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: Column(
children: [
UnorderedList(const [
"More text, plain and simple.",
"And more text in another paragraph, plain and simple.",
"Another paragraph of plain text.",
"A final short paragraph in this section."
]),
],
))),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: const Text(
"Final paragraph of this page, just plain text.",
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
),
)),
),
]),
),
)));
}
}
class UnorderedList extends StatelessWidget {
UnorderedList(this.texts);
final List<String> texts;
#override
Widget build(BuildContext context) {
var widgetList = <Widget>[];
for (var text in texts) {
// Add list item
widgetList.add(UnorderedListItem(text));
// Add space between items
widgetList.add(SizedBox(height: 5.0));
}
return Column(children: widgetList);
}
}
class UnorderedListItem extends StatelessWidget {
const UnorderedListItem(this.text);
final String text;
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("• ",
style: TextStyle(
fontSize: 35,
fontFamily: 'RedHatDisplay',
)),
Expanded(
child: Text(text,
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
)),
),
],
);
}
}
class UnorderedListItemBold extends StatelessWidget {
const UnorderedListItemBold(this.text, this.bold, this.remaining);
final String text;
final String bold;
final String remaining;
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("• ",
style: TextStyle(
fontSize: 35,
fontFamily: 'RedHatDisplay',
)),
Expanded(
child: RichText(
text: const TextSpan(
style: TextStyle(
fontSize: 20, fontFamily: 'RedHatDisplay', color: Colors.black),
children: <TextSpan>[
TextSpan(text: 'I would like just '),
TextSpan(
text: 'this ', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: 'text to be bold.'),
],
child: <TextSpan>[
TextSpan(text: 'In this second bulleted paragraph, I want '),
TextSpan(
text: 'these words ',
style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: 'to be bold.'),
],
children: <TextSpan>[
TextSpan(text: 'In this third bulleted paragraph, '),
TextSpan(
text: 'I want these words ',
style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: 'in bold.'),
],
),
)),
],
);
}
}
Thank you for any help you can give.

Answer 1

What I was trying to achieve can be seen in the attached image - specifically in the 3 sentences "Lorem ipsum hoorah!", where the "ipsum" is in bold.
Here's a solution:
class NotesScreen extends StatefulWidget {
NotesScreen({Key? key}) : super(key: key);
#override
_NotesScreenState createState() => _NotesScreenState();
}
class _NotesScreenState extends State<NotesScreen> {
// disableScreen() async {
// await FlutterWindowManager.addFlags(FlutterWindowManager.FLAG_SECURE);
// }
// Text bold(String abc) {
// return Text(abc,
// style: TextStyle(
// fontSize: 35,
// fontFamily: 'RedHatDisplay',
// fontWeight: FontWeight.bold));
// }
#override
void initState() {
// TODO: implement initState
super.initState();
// disableScreen();
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
decoration: const BoxDecoration(color: Colors.white),
height: 50,
alignment: Alignment.bottomCenter,
child: IconButton(
onPressed: () {
// Navigator.pushAndRemoveUntil(
// context,
// MaterialPageRoute(builder: (context) => const HomeScreen()),
// (route) => false);
},
icon: const Icon(
Icons.home,
color: Colors.black,
size: 25,
)),
),
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Color(0xFFffffff),
child: SingleChildScrollView(
child: Column(children: [
Container(
decoration: BoxDecoration(color: Color(0xFFE30613)),
//height: MediaQuery.of(context).size.height * 0.7,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton.icon(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.arrow_back_ios_new,
color: Colors.white,
),
label: const Text(
"Back",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'RedHatDisplay',
fontWeight: FontWeight.bold),
)),
IconButton(
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => ContactScreen()));
},
icon: const Icon(
Icons.mail,
color: Colors.white,
size: 25,
)),
],
),
const SizedBox(
height: 30,
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Text(
'Information',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontFamily: 'RedHatDisplay',
fontWeight: FontWeight.w600),
),
),
const SizedBox(
height: 10,
),
const SizedBox(
height: 30,
)
],
),
),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: const Text(
"Lorem ipsum sweetness and light.",
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
),
)),
),
Padding(
padding: EdgeInsets.all(8),
child: Container(
alignment: Alignment.centerLeft,
child: const Text(
'Lorem',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
fontFamily: 'RedHatDisplay',
),
),
),
),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: const Text(
"Lorem ipsum.",
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
),
)),
),
Padding(
padding: EdgeInsets.all(8),
child: Container(
alignment: Alignment.centerLeft,
child: const Text(
'Lorem',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
fontFamily: 'RedHatDisplay',
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: Column(
children: [
const UnorderedListItemBold(
text: "Lorem",
bold: "ipsum",
remaining: "summa cum laude."),
const UnorderedListItemBold(
text: "Lorem",
bold:"ipsum2",
remaining: "summa cum laude."),
const UnorderedListItemBold(
text: "Lorem",
bold:"ipsum3",
remaining: "summa cum laude."),
UnorderedList(const [
"Lorem ipsum",
"Lorem ipsum",
"Lorem ipsum"
]),
],
))),
Padding(
padding: EdgeInsets.all(8),
child: Container(
alignment: Alignment.centerLeft,
child: const Text(
'Lorem',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
fontFamily: 'RedHatDisplay',
),
),
),
),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: const Text(
"Lorem ipsum",
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
),
)),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: Column(
children: [
UnorderedList(const [
"Lorem ipsum",
"and more lorem ipsum",
"and more lorem ipsum",
"and more lorem ipsum"
]),
],
))),
Padding(
padding: EdgeInsets.all(8),
child: Container(
alignment: Alignment.centerLeft,
child: const Text(
'Lorem',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
fontFamily: 'RedHatDisplay',
),
),
),
),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: const Text(
"Lorem ipsum",
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
),
)),
),
Padding(
padding: EdgeInsets.all(8),
child: Container(
alignment: Alignment.centerLeft,
child: const Text(
'Lorem',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
fontFamily: 'RedHatDisplay',
),
),
),
),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: const Text(
"Lorem ipsum",
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
),
)),
),
]),
),
)));
}
}
class UnorderedList extends StatelessWidget {
UnorderedList(this.texts);
final List<String> texts;
#override
Widget build(BuildContext context) {
var widgetList = <Widget>[];
for (var text in texts) {
// Add list item
widgetList.add(UnorderedListItem(text));
// Add space between items
widgetList.add(SizedBox(height: 5.0));
}
return Column(children: widgetList);
}
}
class UnorderedListItem extends StatelessWidget {
const UnorderedListItem(this.text);
final String text;
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("• ",
style: TextStyle(
fontSize: 35,
fontFamily: 'RedHatDisplay',
)),
Expanded(
child: Text(text,
style: TextStyle(
fontSize: 20,
fontFamily: 'RedHatDisplay',
)),
),
],
);
}
}
class UnorderedListItemBold extends StatelessWidget {
final String text;
final String bold;
final String remaining;
const UnorderedListItemBold({ Key? key, required this.text, required this.bold, required this.remaining }) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("• ",
style: TextStyle(
fontSize: 35,
fontFamily: 'RedHatDisplay',
)),
Expanded(
child: RichText(
text: TextSpan(
style: TextStyle(
fontSize: 20, fontFamily: 'RedHatDisplay', color: Colors.black),
children: <TextSpan>[
TextSpan(text: text),
TextSpan(
text: bold,
style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(
text:
remaining),
],
),
)),
],
);
}
}
I hope this will be of use to someone else in the future. :)