What is a Button in Flutter?

 

What is a Button in Flutter?

Buttons are fundamental UI components in Flutter that enable users to perform actions with a single tap. As part of the Material Design library, Flutter provides a variety of button widgets that can be customized to fit different design needs.
Whether you want a simple text button, an outlined button, or an elevated button, Flutter makes it easy to integrate buttons into your app for seamless user interactions.

📊 Why Are Buttons Important in UI Design?

✅ TextButton

✅ ElevatedButton (Styled bhi)

✅ OutlinedButton

✅ FloatingActionButton

✅ DropdownButton

✅ IconButton

✅ InkWell Button

✅ PopupMenuButton

✅ GestureDetector Button

✅ CupertinoButton (iOS Style)

✅ ToggleButtons

✅ ElevatedButton with Icon

import 'package:flutter/cupertino.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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? dropdownValue; // Null rakha hai taki hint dikh sake

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Buttons in Flutter")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: [

            TextButton(
              onPressed: () {
                print('Text Button Pressed');
              },
              child: Text('Tap Here'),
            ),

            SizedBox(height: 10),

            ElevatedButton(
              onPressed: () {
                print('Button Pressed!');
              },
              child: Text('Click Me'),
            ),

            SizedBox(height: 10),

            OutlinedButton(
              onPressed: () {
                print('Outlined Button Clicked');
              },
              child: Text('Outline Me'),
            ),

            SizedBox(height: 10),

            FloatingActionButton(
              onPressed: () {
                print('FAB Clicked');
              },
              child: Icon(Icons.add),
            ),

            SizedBox(height: 10),

            DropdownButton<String>(
              value: dropdownValue, // Default value NULL hai
              hint: Text('Select an option'), // Hint add kiya
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
                print('Selected: $newValue');
              },
              items: <String>['Option 1', 'Option 2', 'Option 3']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),

            SizedBox(height: 10),

            IconButton(
              icon: Icon(Icons.favorite, color: Colors.red),
              onPressed: () {
                print('Liked!');
              },
            ),

            SizedBox(height: 10),

            InkWell(
              onTap: () {
                print('InkWell Tapped!');
              },
              child: Container(
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text('Tap Me', style: TextStyle(color: Colors.white)),
              ),
            ),

            SizedBox(height: 10),

            PopupMenuButton<String>(
              onSelected: (String result) {
                print('Selected: $result');
              },
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                PopupMenuItem<String>(
                  value: 'Option 1',
                  child: Text('Option 1'),
                ),
                PopupMenuItem<String>(
                  value: 'Option 2',
                  child: Text('Option 2'),
                ),
              ],
            ),

            SizedBox(height: 10),

            GestureDetector(
              onTap: () {
                print('Single Tap Detected');
              },
              onDoubleTap: () {
                print('Double Tap Detected');
              },
              child: Container(
                width: 100,
                height: 50,
                color: Colors.blue,
                child: Center(child: Text('Tap Me', style: TextStyle(color: Colors.white))),
              ),
            ),

            SizedBox(height: 10),

            CupertinoButton(
              child: Text("iOS Button"),
              color: Colors.blue,
              onPressed: () {
                print("Cupertino Button Pressed");
              },
            ),

            ToggleButtons(
              children: [
                Icon(Icons.format_bold),
                Icon(Icons.format_italic),
                Icon(Icons.format_underline),
              ],
              isSelected: [true, false, false], // Pehla button select hai
              onPressed: (int index) {
                print("Button $index pressed");
              },
            ),

            ElevatedButton.icon(
              onPressed: () {
                print("Button with Icon Pressed");
              },
              icon: Icon(Icons.download),
              label: Text("Download"),
            ),


      ElevatedButton(
        onPressed: () {
          print('Styled Button Clicked!');
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.blue, // Background Color
          foregroundColor: Colors.white, // Text Color
          shadowColor: Colors.black, // Shadow Color
          elevation: 8, // Button Elevation
          padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15), // Padding
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20), // Rounded Corners
          ),
        ),
        child: Text(
          'Styled Button',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ),




          ],
        ),
      ),
    );
  }
}