Working with Text and Images in Flutter

 📱 Working with Text in Flutter

Flutter uses the Text widget to display text on the screen.

Basic Text Example

dart

Copy

Edit

Text('Hello, Flutter!',

  style: TextStyle(

    fontSize: 24,

    color: Colors.blue,

    fontWeight: FontWeight.bold,

  ),

)

Common Text Properties

style: Customize font size, color, weight, font family, etc.

textAlign: Align text (TextAlign.left, .center, .right)

maxLines: Limit number of lines

overflow: Handle overflow (TextOverflow.ellipsis to add “...”)

🖼️ Working with Images in Flutter

Flutter uses the Image widget to display images. You can load images from:

Assets (bundled in your app)

Network (from the web)

File system (device storage)

1. Display Image from Assets

Add images to your project under assets/images/

Update pubspec.yaml:

yaml

Copy

Edit

flutter:

  assets:

    - assets/images/my_image.png

Use in code:

dart

Copy

Edit

Image.asset('assets/images/my_image.png')

2. Display Image from Network

dart

Copy

Edit

Image.network('https://example.com/image.jpg')

🖥️ Complete Example Widget

dart

Copy

Edit

import 'package:flutter/material.dart';

class TextImageDemo extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Text & Image Demo')),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Text(

              'Welcome to Flutter!',

              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),

            ),

            SizedBox(height: 20),

            Image.asset('assets/images/flutter_logo.png', width: 100),

            SizedBox(height: 20),

            Text(

              'This is an example of displaying text and images.',

              textAlign: TextAlign.center,

              style: TextStyle(fontSize: 16),

            ),

          ],

        ),

      ),

    );

  }

}

📌 Tips

Use RichText widget for styling parts of text differently.

Use FadeInImage for smooth loading of network images.

Optimize image sizes for performance on mobile devices.

Use TextTheme for consistent styling across the app.

Learn Flutter Training in Hyderabad

Read More

How to Use the Flutter Debug Console

Hot Reload vs Hot Restart in Flutter

Dart Basics for Flutter Developers

Exploring the Flutter Directory Structure