free geoip
82

How to Use Text Widget in Flutter for Beginners

The Text widget in Flutter is one of the most commonly used widgets for displaying a string of text with…

The Text widget in Flutter is one of the most commonly used widgets for displaying a string of text with single style. Whether you’re building a simple UI or a complex app interface, understanding how to use Text effectively is essential for any Flutter developer.

Text Widget in Flutter

What Is Text Widget?

The Text widget allows you to display styled or unstyled text on the screen. It is very flexible and supports a wide range of text styling options like font size, color, weight, spacing, alignment, overflow, and more.

Basic Usage Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Text Widget Example')),
        body: const Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

In this example, we create a simple Flutter app that shows “Hello, Flutter!” in bold, blue text with a font size of 24.

Customizing Text Widget

You can further customize the text using properties such as:

  • textAlign: Aligns text (e.g., TextAlign.center)
  • maxLines: Limits the number of lines
  • overflow: Handles overflow like ellipsis
  • style: Applies styles using TextStyle

Example with more customization:

Text(
  'This is a very long text that might overflow.',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  textAlign: TextAlign.center,
  style: TextStyle(
    fontSize: 16,
    color: Colors.black54,
  ),
)

For official documentation and advanced styling, you can visit the Flutter docs:
https://api.flutter.dev/flutter/widgets/Text-class.html

Final Thoughts

Learning how to use the Text widget efficiently will help you build better and more readable UIs. Practice with different properties to understand how it behaves in different screen sizes and layouts.

rysasahrial

Leave a Reply

Your email address will not be published. Required fields are marked *