How to Use Text, Buttons, Images, Icons and Input Fields in Flutter

❖ Welcome to Param Classes!

Every mobile application needs a user interface where users can read information, click buttons, view images, recognize icons and enter details. Flutter provides different built-in widgets to create these interface elements easily.

In this tutorial, we will learn how to use five important Flutter UI components:

1. Text Widget

2. Button Widgets

3. Image Widget

4. Icon Widget

5. TextField and TextFormField

We will understand each widget with practical examples and finally create a simple student registration screen.

At Param Classes, we believe beginners learn programming more effectively when they understand concepts through practical projects. Let's start building Flutter interfaces step by step.

✦ 1. Text Widget in Flutter

The Text widget is used to display text on the screen. You can use it for headings, descriptions, labels, messages and other information.

❖ Basic Text 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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Text Widget'),
        ),
        body: const Center(
          child: Text('Welcome to Param Classes!'),
        ),
      ),
    );
  }
}

❖ Text Styling Example

You can customize text using the TextStyle class.

Text(
  'Flutter App Development',
  style: TextStyle(
    fontSize: 25,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    letterSpacing: 1,
  ),
)

Important TextStyle Properties:

• fontSize: Changes the text size.

• color: Changes the text color.

• fontWeight: Controls boldness.

• fontStyle: Makes text normal or italic.

• letterSpacing: Adds space between letters.

• decoration: Adds underline or other text decoration.

You can use these properties to create attractive headings and readable content.

✦ 2. Button Widgets in Flutter

Buttons allow users to perform actions by tapping the screen. For example, users can submit a form, log in, register or move to another screen.

Flutter provides several button widgets.

❖ ElevatedButton

An ElevatedButton is a filled button that is commonly used for important actions.

ElevatedButton(
  onPressed: () {
    print('Button Clicked');
  },
  child: const Text('Submit'),
)

❖ TextButton

TextButton displays a button with text and minimal visual decoration.

TextButton(
  onPressed: () {
    print('Text Button Clicked');
  },
  child: const Text('Forgot Password?'),
)

❖ OutlinedButton

OutlinedButton displays a button with a border.

OutlinedButton(
  onPressed: () {
    print('Registration Clicked');
  },
  child: const Text('Register'),
)

❖ IconButton

IconButton is used when you want to display a clickable icon.

IconButton(
  onPressed: () {
    print('Favorite Clicked');
  },
  icon: const Icon(Icons.favorite),
)

❖ Understanding onPressed

The onPressed property defines what happens when a user taps a button.

For example:

ElevatedButton(
  onPressed: () {
    print('Welcome to Flutter');
  },
  child: const Text('Click Me'),
)

When the user taps the button, the message is printed in the debug console.

If you set onPressed: null, the button becomes disabled.

✦ 3. Image Widget in Flutter

Images make mobile applications more attractive and informative. Flutter supports displaying images from local project assets and network URLs.

There are two common ways to display images.

❖ A. Display an Asset Image

First, create an assets/images folder inside your Flutter project.

Add an image file such as logo.png inside that folder.

Next, open pubspec.yaml and add the asset configuration:

flutter:
  uses-material-design: true

  assets:
    - assets/images/

Make sure the indentation is correct. Save the file and run:

flutter pub get

Now display the image:

Image.asset(
  'assets/images/logo.png',
  width: 150,
  height: 150,
  fit: BoxFit.contain,
)

❖ B. Display a Network Image

If you want to display an image from an online URL, use Image.network().

Image.network(
  'https://picsum.photos/300/200',
  width: 300,
  height: 200,
  fit: BoxFit.cover,
)

The image must be accessible through the internet. For production apps, also consider loading and error states.

❖ Important Image Properties

• width: Sets image width.

• height: Sets image height.

• fit: Controls how the image fits inside its available space.

• errorBuilder: Displays a fallback widget if loading fails.

• loadingBuilder: Helps show loading progress.

Example with an error fallback:

Image.network(
  'https://picsum.photos/300/200',
  width: 200,
  height: 150,
  fit: BoxFit.cover,
  errorBuilder: (context, error, stackTrace) {
    return const Icon(
      Icons.broken_image,
      size: 50,
    );
  },
)

✦ 4. Icon Widget in Flutter

Icons help users understand app features quickly. For example, a home icon represents the home screen, a person icon represents a profile, and a shopping cart icon represents shopping.

Flutter includes many Material Design icons.

❖ Basic Icon Example

const Icon(
  Icons.home,
  size: 40,
  color: Colors.blue,
)

❖ Different Icons Example

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: const [
    Icon(Icons.home, size: 35, color: Colors.blue),
    Icon(Icons.person, size: 35, color: Colors.green),
    Icon(Icons.settings, size: 35, color: Colors.orange),
    Icon(Icons.favorite, size: 35, color: Colors.red),
  ],
)

❖ Common Material Icons

• Icons.home

• Icons.person

• Icons.search

• Icons.settings

• Icons.favorite

• Icons.shopping_cart

• Icons.notifications

• Icons.camera_alt

You can explore more icons in the official Flutter Material Icons documentation.

✦ 5. Input Fields in Flutter

Input fields allow users to enter information such as name, mobile number, email address and password.

Flutter provides two commonly used widgets:

• TextField

• TextFormField

❖ TextField Example

TextField(
  decoration: InputDecoration(
    labelText: 'Enter Your Name',
    hintText: 'Your full name',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.person),
  ),
)

❖ Important InputDecoration Properties

• labelText: Displays a label.

• hintText: Shows a helpful placeholder.

• border: Adds a border around the input.

• prefixIcon: Displays an icon before the input.

• suffixIcon: Displays an icon after the input.

• filled: Enables input background filling.

• fillColor: Sets the background color.

❖ Password TextField

To create a password field, use obscureText: true.

TextField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.lock),
  ),
)

The entered password will be hidden.

✦ 6. How to Get User Input Using TextEditingController

Sometimes you need to read the information entered by the user. For this, Flutter provides TextEditingController.

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: InputScreen(),
    );
  }
}

class InputScreen extends StatefulWidget {
  const InputScreen({super.key});

  @override
  State<InputScreen> createState() => _InputScreenState();
}

class _InputScreenState extends State<InputScreen> {
  final TextEditingController nameController =
      TextEditingController();

  @override
  void dispose() {
    nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('User Input Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              controller: nameController,
              decoration: const InputDecoration(
                labelText: 'Enter Your Name',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                String name = nameController.text;

                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Hello $name'),
                  ),
                );
              },
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

❖ How Does This Work?

1. TextEditingController manages the text entered by the user.

2. controller: nameController connects the controller to TextField.

3. nameController.text reads the entered value.

4. The button displays the entered name using a SnackBar.

5. dispose() releases the controller when the screen is removed.

This technique is useful for login screens, registration forms and search fields.

✦ 7. TextField vs TextFormField

Both widgets are used to accept user input, but they are commonly used in different situations.

Feature	TextField	TextFormField
Input	Accepts user input	Accepts user input
Controller	Supported	Supported
Validation	Usually handled manually	Supports a validator
Form integration	Not directly integrated	Works with Form
Common use	Search and simple input	Registration and login forms

❖ TextFormField Validation Example

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: const InputDecoration(
          labelText: 'Enter Your Name',
          border: OutlineInputBorder(),
        ),
        validator: (value) {
          if (value == null || value.trim().isEmpty) {
            return 'Please enter your name';
          }
          return null;
        },
      ),
      const SizedBox(height: 15),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('Form is valid');
          }
        },
        child: const Text('Submit'),
      ),
    ],
  ),
)

Here, Form groups the input fields, and validator checks whether the entered value is valid.

✦ 8. Practical Project: Create a Student Registration Screen

Now let's combine Text, Buttons, Icons and Input Fields to create a simple student registration screen.

Create or replace the code in lib/main.dart:

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(
      debugShowCheckedModeBanner: false,
      home: const RegistrationScreen(),
    );
  }
}

class RegistrationScreen extends StatefulWidget {
  const RegistrationScreen({super.key});

  @override
  State<RegistrationScreen> createState() =>
      _RegistrationScreenState();
}

class _RegistrationScreenState
    extends State<RegistrationScreen> {
  final _formKey = GlobalKey<FormState>();

  final nameController = TextEditingController();
  final emailController = TextEditingController();
  final mobileController = TextEditingController();

  @override
  void dispose() {
    nameController.dispose();
    emailController.dispose();
    mobileController.dispose();
    super.dispose();
  }

  void registerStudent() {
    if (_formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(
            'Welcome ${nameController.text}!',
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Student Registration'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Icon(
                Icons.school,
                size: 70,
                color: Colors.blue,
              ),
              const SizedBox(height: 15),
              const Text(
                'Register Now',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 25),

              TextFormField(
                controller: nameController,
                decoration: const InputDecoration(
                  labelText: 'Student Name',
                  prefixIcon: Icon(Icons.person),
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null ||
                      value.trim().isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 15),

              TextFormField(
                controller: emailController,
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(
                  labelText: 'Email Address',
                  prefixIcon: Icon(Icons.email),
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null ||
                      !value.contains('@')) {
                    return 'Enter a valid email address';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 15),

              TextFormField(
                controller: mobileController,
                keyboardType: TextInputType.phone,
                decoration: const InputDecoration(
                  labelText: 'Mobile Number',
                  prefixIcon: Icon(Icons.phone),
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null ||
                      value.length != 10) {
                    return 'Enter a 10-digit mobile number';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 25),

              ElevatedButton(
                onPressed: registerStudent,
                child: const Text('Register Student'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

❖ Project Explanation

In this project, we used:

• Text: Displays the registration heading.

• Icon: Displays the education icon.

• TextFormField: Accepts student information.

• TextEditingController: Reads the entered information.

• Form: Groups the input fields.

• validator: Checks the input values.

• ElevatedButton: Submits the registration form.

• SnackBar: Displays a success message.

• SingleChildScrollView: Allows the screen to scroll when content needs more space.

Important: This is a front-end practice project. It validates the fields and displays a message, but it does not save student details in a database.

✦ 9. Practice Tasks for Beginners

After completing this tutorial, try these exercises:

1. Create a Text widget with different font sizes and colors.

2. Create three buttons: Login, Register and Cancel.

3. Display a local image using Image.asset().

4. Create a row containing five different Material icons.

5. Create a password field using TextField.

6. Build a student registration form with name, email and mobile fields.

7. Add validation to every required field.

❖ Conclusion

Text, Buttons, Images, Icons and Input Fields are essential components of Flutter application development. They help developers create interactive and user-friendly mobile applications.

In this tutorial, we learned how to display text, create different buttons, show images, use Material icons, accept user input and validate a student registration form.

At Param Classes, we encourage students to practise every example and build small projects before moving to advanced Flutter development.

Keep learning, keep practising and start creating your own mobile applications!

Learn Today, Grow Tomorrow with Param Classes!