How To Make Flutter Text Bold-Example Code

Flutter text bold implementation. In this post, you will get a simple Flutter example demonstrating how to make Flutter text bold. We’ll describe each and every detail concerning Flutter text bold, which means that you’ll be ready to incorporate it to your code as well. Let’s not wait more and start implementing Flutter text bold.

Outline

What is Flutter Text Bold?
Default Flutter Text Weight
Custom Flutter Text Weight
Implementing Flutter Text Bold
Flutter Text Bold Implementation Source Code
Conclusion

What is Flutter Text Bold?

Flutter text bold as the name suggests, it is making the text bold in Flutter text widget. In this post, let’s first see what the default Flutter text weight looks like then we will see how to make Flutter text bold. Flutter text weight defines how much the text should look bold like you can customize the boldness of text in Flutter.

Default Flutter Text Weight

So to see the default Flutter text weight, we have to define a simple Flutter text widget with some text and also we will make the text font size bigger so you can see it clearly. See the below code:

Text(
          'This is the Flutter text',
          style: TextStyle(fontSize: 20),
        )

You can see in the image shown above that the default Flutter text weight looks like this.

Custom Flutter Text Weight

You can customize the weight of Flutter text and can specify how much boldness you need in your Flutter text. For that we have to use the style constructor of the Flutter text widget class and pass it the text style class. Now by using the font weight constructor of the text style class, we can specify the amount of boldness. See the below code:

Text(
         'This is the custom Flutter text weight',
          style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
        )

You can see in the above image that the Flutter text is a bit bold now. You can use the FontWeight.w100 to FontWeight.w900 values to specify the boldness of your Flutter text weight.

Implementing Flutter Text Bold

Let’s now implement a fully Flutter text bold. For that we have to use the same font weight constructor of the text style class and we just have to pass FontWeight.bold to it. See the below code:

Text(
    'This is the bold Flutter text',
    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        )

You can see that the Flutter text bold is implemented.

So we have learned how we can change the font weight of Flutter text and also how to make Flutter text bold. Let me know if you have any questions regarding Flutter text bold. I would love to answer.

Below is the complete source code of Flutter text bold implementation.

Flutter Text Bold Implementation Source Code

flutter text bold

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Text(
          'This is the bold Flutter text',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
      ),
    )));
  }
}

Conclusion

To conclude, now we have an in depth practical code implementation knowledge of how to implement Flutter text bold. I would love to hear what you think about this post in the comments. I also have other informative articles for you on Flutter widgets, amazing Flutter templates with source code, Flutter app development, Flutter animations, Flutter books and many more. Links to some of these amazing articles are listed below. Others posts can be found using the search box or the menu navigation bar. Thank you for reading this post.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.

How To Make Flutter Text Bold-Example Code

Outline

What is Flutter Text Bold?

Default Flutter Text Weight

Custom Flutter Text Weight

Implementing Flutter Text Bold

Flutter Text Bold Implementation Source Code

Conclusion

Share this post:

Leave a Reply Cancel reply

Outline

What is Flutter Text Bold?

Default Flutter Text Weight

Custom Flutter Text Weight

Implementing Flutter Text Bold

Flutter Text Bold Implementation Source Code

Conclusion

Share this post:

Related Posts

Leave a Reply Cancel reply