Basic UI Elements

Category

We will create a file for each component in the components folder.

Copylib/
├── features/
│   ├── flutter_components/
│   │   ├── basic_elements/
│   │   │   ├── components/
│   │   │   │   ├── text_component.dart          # Text Widgets
│   │   │   │   ├── image_component.dart         # Image Widgets
│   │   │   │   ├── icon_component.dart          # Icon Widgets
│   │   │   │   ├── button_component.dart        # Button Widgets
│   │   │   │   └── progress_component.dart      # Progress Widgets
│   │   │   └── screen/
│   │   │       └── basic_element_page.dart      # Main Page
└── main.dart

---

Step 1: Create Component Files

1. Text Component

Create text_component.dart to display all text-related widgets.

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Text", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const Text("This is a basic Text widget."),
        const Text.rich(
          TextSpan(
            text: "RichText: ",
            style: TextStyle(fontWeight: FontWeight.bold),
            children: [
              TextSpan(
                text: "This is bold and italic.",
                style: TextStyle(fontStyle: FontStyle.italic),
              )
            ],
          ),
        ),
      ],
    );
  }
}

---

2. Image Component

Create image_component.dart for image-related widgets.

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Image", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        Image.asset('assets/sample_image.png', height: 100, width: 100, fit: BoxFit.cover),
        const SizedBox(height: 8),
        Image.network(
          'https://flutter.dev/images/flutter-logo-sharing.png',
          height: 100,
          width: 100,
        ),
      ],
    );
  }
}

---

3. Icon Component

Create icon_component.dart for icon-related widgets.

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Icon", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const Row(
          children: [
            Icon(Icons.star, color: Colors.yellow, size: 30),
            SizedBox(width: 10),
            Icon(Icons.favorite, color: Colors.red, size: 30),
            SizedBox(width: 10),
            Icon(Icons.thumb_up, color: Colors.blue, size: 30),
          ],
        ),
      ],
    );
  }
}

---

4. Button Component

Create button_component.dart for button-related widgets.

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Button", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        Row(
          children: [
            ElevatedButton(onPressed: () {}, child: const Text("ElevatedButton")),
            const SizedBox(width: 10),
            OutlinedButton(onPressed: () {}, child: const Text("OutlinedButton")),
            const SizedBox(width: 10),
            IconButton(onPressed: () {}, icon: const Icon(Icons.add), color: Colors.green),
          ],
        ),
      ],
    );
  }
}

---

5. Progress Component

Create progress_component.dart for progress indicators.

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Progress", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const CircularProgressIndicator(),
        const SizedBox(height: 10),
        const LinearProgressIndicator(),
      ],
    );
  }
}

---

Step 2: Update basic_element_page.dart

Import all components and display them.

Code: basic_element_page.dart

Copyimport 'package:flutter/material.dart';
import '../components/text_component.dart';
import '../components/image_component.dart';
import '../components/icon_component.dart';
import '../components/button_component.dart';
import '../components/progress_component.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Basic UI Elements")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            TextComponent(),
            SizedBox(height: 20),
            ImageComponent(),
            SizedBox(height: 20),
            IconComponent(),
            SizedBox(height: 20),
            ButtonComponent(),
            SizedBox(height: 20),
            ProgressComponent(),
          ],
        ),
      ),
    );
  }
}

---

Step 3: Add Main Entry Point

Update main.dart to load the BasicElementPage.

Code: main.dart

Copyimport 'package:flutter/material.dart';
import 'features/flutter_components/basic_elements/screen/basic_element_page.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: 'Basic UI Elements',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const BasicElementPage(),
    );
  }
}

---

Step 4: Add Images

Place an image (e.g., sample_image.png) in your assets folder:

Project Update:

Copyassets/
└── image/
      --sample.jpg

Add to pubspec.yaml:

Copyflutter:
  assets:
    - assets/image/sample.jpg

---

When you run the app:

1. Text: Basic text and rich text.

2. Image: Displays an asset and a network image.

3. Icon: Three colored icons.

4. Button: ElevatedButton, OutlinedButton, and IconButton.

5. Progress: Circular and Linear progress indicators.