CSS also known as Cascading Style Sheet is one the most famous way to make text or widgets beautiful in Flutter. Using CSS Style we can prepare a set of code for single time and use them again and again as we required. CSS works like a function create once and use many times. So in this tutorial we would Create Apply CSS Style on Text in Flutter Like React Native & HTML Android iOS Example Tutorial.
Contents in this project Create Apply CSS Style on Text in Flutter Like React Native & HTML Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with StatelessWidget .
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a final type TextStyle named as textStyleBlue and textStyleGreen. We would define text color, font size and font weight on text using this style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
final TextStyle textStyleBlue = TextStyle( color: Colors.lightBlue, fontWeight: FontWeight.bold, fontSize: 24, ); final TextStyle textStyleGreen = TextStyle( color: Colors.green, fontWeight: FontWeight.bold, fontSize: 24, ); |
5. Creating Widget Build area in MyApp class. Now we would make Scaffold widget -> Center widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ ],),) ) ); } |
6. Creating 4 Text widget wrap in Padding widget. Now we would call our above created text style in Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 1', style: textStyleBlue)), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 2', style: textStyleGreen)), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 3', style: textStyleBlue)), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 4', style: textStyleGreen)), |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final TextStyle textStyleBlue = TextStyle( color: Colors.lightBlue, fontWeight: FontWeight.bold, fontSize: 24, ); final TextStyle textStyleGreen = TextStyle( color: Colors.green, fontWeight: FontWeight.bold, fontSize: 24, ); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 1', style: textStyleBlue)), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 2', style: textStyleGreen)), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 3', style: textStyleBlue)), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Random Text With Style - 4', style: textStyleGreen)), ],),) ) ); } } |
Screenshot:
