Welcome to the exciting world of Flutter UI development! In this section, we'll begin our journey by learning how to style the most fundamental building blocks of your apps: text, colors, and padding. These elements are the canvas and brushes with which you'll paint your user interfaces, making them not only functional but also visually appealing.
Let's start with styling text. Flutter's Text widget is your go-to for displaying strings of text. But it's not just about showing words; you can control its appearance with a TextStyle object.
Text(
'Hello, Flutter!',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
color: Colors.blue,
decoration: TextDecoration.underline,
),
)In this example, we've applied several properties to the TextStyle:
fontSize: Controls the size of the text.fontWeight: Sets the boldness of the text (e.g.,FontWeight.bold,FontWeight.normal).fontStyle: Determines if the text is italic (FontStyle.italic) or normal.color: Sets the color of the text. Flutter provides a rich set of predefined colors in theColorsclass.decoration: Adds decorations like underlines, overlines, or strikethroughs.
Colors in Flutter are incredibly versatile. Beyond the basic named colors like Colors.red, Colors.green, and Colors.blue, you can create custom colors using Color.fromRGBO or Color.fromARGB for precise control over RGB(A) values.
// Using predefined colors
Color blueColor = Colors.blue;
// Using RGB values (red, green, blue, alpha)
Color customColor = Color.fromRGBO(100, 150, 200, 1.0); // 1.0 is fully opaque
// Using ARGB values (alpha, red, green, blue)
Color anotherCustomColor = Color.fromARGB(255, 50, 100, 150); // 255 is fully opaquePadding is essential for creating visual breathing room around your widgets. It's the space between the widget's content and its border. You can apply padding using the Padding widget.