How to Style Text in Flutter™ using its Wrap Widget

DLT Labs
6 min readJan 4, 2021
How to Style Text in Flutter using its Wrap Widget

Flutter lets you put together various widgets to develop complex & customizable designs. Any UI element that is rendered is a widget in Flutter.

In this blog, we will get to know how different widgets can be combined to create a multi-styled text sentence.

For example:

  • I accept Terms of Service & Privacy Policy.
  • Don’t have an account? Sign Up

In the above sentences, the style of some text is different from the rest. There should also be a click event on this.

In Flutter this can be achieved using different approaches. I am going to show you how it can be done using the Wrap widget.

A Wrap widget is used to combine different widgets with different styles.

>> Let’s start by creating a new Flutter project. Give it a name & save it somewhere on your system. Open the main.dart file and replace all the code in the main.dart file with the code below:

import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());

Executing this code will give you this error — “The function ‘MyApp’ isn’t defined”. This happens as there is no MyApp class. Ignore this error for now.

>> Create a new file and name it ‘my_app.dart’. Paste the code below in the newly created file:

import 'package:flutter/material.dart';class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: HomeScreen(),    );  }}class HomeScreen extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Multi-Styled text'),      ),    );  }

--

--

DLT Labs

DLT Labs is a global leader in Distributed Ledger Technology and Enterprise Products. To know more, head over to: https://www.dltlabs.com/