Input Widgets

lib/
├── features/
│   ├── input_widgets/
│   │   ├── components/
│   │   │   ├── date_time_component.dart     
│   │   │   ├── dropdown_component.dart    
│   │   │   ├── selection_component.dart     
│   │   │   ├── slider_component.dart        
│   │   │   └── text_input_component.dart    
│   │   └── screen/
│   │       └── input_widget_screen.dart   
└── main.dart

1. Text Input Component

File: text_input_component.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Text Input", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const TextField(
          decoration: InputDecoration(labelText: "Enter Text", border: OutlineInputBorder()),
        ),
        const SizedBox(height: 8),
        TextFormField(
          decoration: const InputDecoration(labelText: "Enter Form Text", border: OutlineInputBorder()),
        ),
      ],
    );
  }
}

2. Selection Component

File: selection_component.dart

import 'package:flutter/material.dart';

class SelectionComponent extends StatefulWidget {
  const SelectionComponent({Key? key}) : super(key: key);

  @override
  State<SelectionComponent> createState() => _SelectionComponentState();
}

class _SelectionComponentState extends State<SelectionComponent> {
  bool _checkboxValue = false;
  int? _radioValue = 1;
  bool _switchValue = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Selection Widgets", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        // Checkbox
        CheckboxListTile(
          title: const Text("Checkbox"),
          value: _checkboxValue,
          onChanged: (value) {
            setState(() => _checkboxValue = value!);
          },
        ),
        // Radio Buttons
        RadioListTile(
          title: const Text("Option 1"),
          value: 1,
          groupValue: _radioValue,
          onChanged: (value) {
            setState(() => _radioValue = value as int?);
          },
        ),
        RadioListTile(
          title: const Text("Option 2"),
          value: 2,
          groupValue: _radioValue,
          onChanged: (value) {
            setState(() => _radioValue = value as int?);
          },
        ),
        // Switch
        SwitchListTile(
          title: const Text("Switch"),
          value: _switchValue,
          onChanged: (value) {
            setState(() => _switchValue = value);
          },
        ),
      ],
    );
  }
}

3. Slider Component

File: slider_component.dart

import 'package:flutter/material.dart';

class SliderComponent extends StatefulWidget {
  const SliderComponent({Key? key}) : super(key: key);

  @override
  State<SliderComponent> createState() => _SliderComponentState();
}

class _SliderComponentState extends State<SliderComponent> {
  double _sliderValue = 50;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Slider", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        Slider(
          value: _sliderValue,
          min: 0,
          max: 100,
          divisions: 10,
          label: _sliderValue.round().toString(),
          onChanged: (value) {
            setState(() => _sliderValue = value);
          },
        ),
      ],
    );
  }
}

4. Date & Time Picker Component

File: date_time_component.dart

import 'package:flutter/material.dart';

class DateTimeComponent extends StatefulWidget {
  const DateTimeComponent({Key? key}) : super(key: key);

  @override
  State<DateTimeComponent> createState() => _DateTimeComponentState();
}

class _DateTimeComponentState extends State<DateTimeComponent> {
  DateTime? _selectedDate;

  Future<void> _pickDate(BuildContext context) async {
    final DateTime? date = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (date != null) {
      setState(() => _selectedDate = date);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Date Picker", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        ElevatedButton(
          onPressed: () => _pickDate(context),
          child: const Text("Select Date"),
        ),
        if (_selectedDate != null) Text("Selected Date: ${_selectedDate.toString().split(" ")[0]}"),
      ],
    );
  }
}

File: dropdown_component.dart

import 'package:flutter/material.dart';

class DropdownComponent extends StatefulWidget {
  const DropdownComponent({Key? key}) : super(key: key);

  @override
  State<DropdownComponent> createState() => _DropdownComponentState();
}

class _DropdownComponentState extends State<DropdownComponent> {
  String? _selectedItem = "Option 1";
  final List<String> _items = ["Option 1", "Option 2", "Option 3"];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Dropdown", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        DropdownButton<String>(
          value: _selectedItem,
          items: _items.map((String item) {
            return DropdownMenuItem(value: item, child: Text(item));
          }).toList(),
          onChanged: (value) {
            setState(() => _selectedItem = value);
          },
        ),
      ],
    );
  }
}

Step 2: Main Screen

Update input_widget_screen.dart to display all components.

File: input_widget_screen.dart

dartCopy codeimport 'package:flutter/material.dart';
import '../components/text_input_component.dart';
import '../components/selection_component.dart';
import '../components/slider_component.dart';
import '../components/date_time_component.dart';
import '../components/dropdown_component.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Input Widgets")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            TextInputComponent(),
            SizedBox(height: 20),
            SelectionComponent(),
            SizedBox(height: 20),
            SliderComponent(),
            SizedBox(height: 20),
            DateTimeComponent(),
            SizedBox(height: 20),
            DropdownComponent(),
          ],
        ),
      ),
    );
  }
}

Step 3: Main Entry Point

Update main.dart:

import 'package:flutter/material.dart';
import 'features/input_widgets/screen/input_widget_screen.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: 'Input Widgets',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const InputWidgetScreen(),
    );
  }
}