Text() widget is used for showing text/label

1.Syntax

                Text(sting_data)
                

2.Example

                Text("This is some text ")
                

3. Full code

                import 'package:flutter/material.dart';

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

                class MyApp extends StatelessWidget {
                  const MyApp({Key? key}) : super(key: key);

                  @override
                  Widget build(BuildContext context) {
                    return MaterialApp(
                      title: 'Welcome to Flutter',
                      home: Scaffold(

                        body: Text('Hello World! This is a text widget.'),

                      ),
                    );
                  }
                }
                

Note that Text() widget is used in the body parameter of above code

1. Widgets like AppBar: To display a title in the app bar.

              AppBar(
                  title: Text('My App'),
                )

              

2. Body of a Scaffold: To display text in the main content area of a screen.

              Scaffold(
                body: Center(
                  child: Text('Hello, Flutter!'),
                ),
              )


              

3. Inside other layout widgets (e.g., Column, Row, ListView): To display text as part of a larger layout.

              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('First Name'),
                    Text('Last Name'),
                  ],
                )


                

4. Within Buttons or Icons for labeling purposes:

                ElevatedButton(
                  onPressed: () {},
                  child: Text('Submit'),
                )


                

5. In AlertDialogs or Dialogs to show messages or titles.

                AlertDialog(
                  title: Text('Alert'),
                  content: Text('This is an important message.'),
                  actions: [
                    TextButton(
                      onPressed: () {
                        // Some action
                      },
                      child: Text('OK'),
                    ),
                  ],
                )

                

6. Container.

                Container(
                  padding: EdgeInsets.all(16.0),
                  child: Text(
                    'Flutter is awesome!',
                    style: TextStyle(fontSize: 16, fontStyle: FontStyle.italic),
                  ),
                )

                

Option 1: using widget

                import 'package:flutter/material.dart';
    
    void main() {      
      runApp(MyApp());
    }
    
    // the root widget of our application
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
    
       
        return MaterialApp(
    
     
          home: Scaffold(
    
            
            appBar: AppBar(
             
              title: Text("Exploring Widgets"),
            ),
    
           
            body: myWidget(),
    
          ),
        );
      }
    }
    
    // This is where we will play with the Text widget
    Widget myWidget() {
      return Text(
        "Hello, World!",
      );
    }

  

Option 2: using class

Define custom widget

  import 'package:flutter/material.dart';

class CustomText extends StatelessWidget {
  final String text;
  final TextStyle? textStyle;
  final TextAlign? textAlign;

  const CustomText(
    this.text, {
    Key? key,
    this.textStyle,
    this.textAlign,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: textStyle, // You can pass a custom TextStyle
      textAlign: textAlign, // You can specify the alignment
    );
  }
}

uage

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomText(
              'Hello, World!',
              textStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),
            CustomText(
              'This is a custom text widget.',
              textStyle: TextStyle(fontSize: 16, color: Colors.blue),
              textAlign: TextAlign.left,
            ),
          ],
        ),
      ),
    );
  }
}

1. Properties

Properties are optional

                const Text(String data,{  
                    Key key,  
                    TextStyle style,  
                    StrutStyle strutStyle,  
                    TextAlign textAlign,  
                    TextDirection textDirection,  
                    TextOverflow overflow,  
                    bool softWrap,  
                    double textScaleFactor,  
                    int maxLines,  
                    String semanticsLabel,  
                    TextWidthBasis textWidthBasis,  
                    TextHeightBehavior textHeightBehavior  
                    }  
                ) 

                  

2. font size

                    Text(
                        'Hello World!',
                        style: TextStyle(fontSize: 25),
                    ),
                  

3. font weight

                    Text(
                        'Hello World!',
                        style: TextStyle(fontSize: 25,
                            fontWeight: FontWeight.bold
                        ),
                    ),
                  

4. color

                    Text(
                        'Hello World!',
                        style: TextStyle(fontSize: 25,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.grey[800],
                        ),
                    ),
                  

5. TextOverflow

                  Text(
                              'FilledStacks content is pretty cool. I think. But I\'m bias so my opinion doesn\'t really count.',
                              maxLines: 3,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                  color: Colors.grey[800],                                  
                                  fontSize: 40),
                            )),

                            

textAlign

Specifies how the text is aligned within its container. Options include TextAlign.left, TextAlign.center, TextAlign.right, and TextAlign.justify.

                            Text(
                              'Hello, Flutter!',
                              style: TextStyle(
                                color: Colors.blue,
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                              ),
                              textAlign: TextAlign.center,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            )


                            

in pubspec file

              flutter:      
                    fonts:
                      - family: Open Sans
                        fonts:
                          - asset: assets/fonts/OpenSans-Bold.ttf
                            weight: 700
                          - asset: assets/fonts/OpenSans-ExtraBold.ttf
                            weight: 800
                          - asset: assets/fonts/OpenSans-Light.ttf
                            weight: 300
                          - asset: assets/fonts/OpenSans-Regular.ttf
                            weight: 400

                  

Apply to all text

in pubspec file

                  TextStyle(
                      color: Colors.grey[800],
                      fontWeight: FontWeight.w900,
                      fontStyle: FontStyle.italic,
                      fontFamily: 'Open Sans',
                      fontSize: 40),
                  

Global Theming

                      class MyApp extends StatelessWidget {
                      @override
                      Widget build(BuildContext context) {
                        return MaterialApp(
                            title: 'Skeleton Watcher',
                            theme: ThemeData(
                              // Use the old theme but apply the following three changes
                                textTheme: Theme.of(context).textTheme.apply(
                                    fontFamily: 'Open Sans',
                                    bodyColor: Colors.white,
                                    displayColor: Colors.white)),
                            home: HomeView());
                      }
                    }

                    

specific text

                    Text(
                        'FilledStacks content is pretty cool. I think. But I\'m bias so my opinion doesn\'t really count.',
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            color: Colors.grey[800],
                            fontWeight: FontWeight.w900,
                            fontStyle: FontStyle.italic,
                            fontFamily: 'Open Sans',
                            fontSize: 40),
                      )),

                      

Installation

add to pubspec.yaml

                        google_fonts: ^0.1.0
                    

import

                      import 'package:google_fonts/google_fonts.dart';
                    

use your font e.g

                    Text("TestText", style:GoogleFonts.dancingScriptTextStyle(
                              fontSize: 25,
                              fontStyle: FontStyle.normal,
                    )