The text of our application doesn’t really stand out. So let’s change the code to make the text big and red!
As mentioned earlier, the Text
widget constructor allows multiple parameters including one called style
. The style
parameter tells the Text
widget how to style the text. Let’s use it.
Flutter provides a class called TextStyle
that holds style information about our Text
. Its constructor allows us to specify attributes such as color
and fontSize
. Let’s check it out.
We can first create a variable for our TextStyle
. Let’s declare this variable near the top, between main
and runApp
:
void main() { const bigRedStyle = TextStyle(color:Colors.red, fontSize: 24); runApp(
In bigRedStyle
, we have indicated the color and size of the text.
Next, we can add a style
parameter to the Text
constructor and add the new style we created as its argument.
Text( 'Hello, world!', style: bigRedStyle );
Let’s try it out in the Flutter editor.
Instructions
Let’s add some style
to our text.
First, create a variable to hold our TextStyle
object. Specify a color and size for our text. Flutter provides a list of supported colors.
Hint
const aStyle = TextStyle(color: Colors.MY_COLOR, fontSize: MY_SIZE);
Next, set that variable as the style
attribute of the Text
widget.
Hint
This will look similar to:
Text( 'Hello, world!', style: STYLE_VARIABLE_HERE );
Solution
void main() { const bigBlueStyle = TextStyle(color: Colors.blue, fontSize: 36); runApp( const MaterialApp( home: Scaffold( body: Text( 'Codecademy: Flutter Edition', style: bigBlueStyle ) ) ) ); }