Flutter Buttons (Text Button, Elevated Button, Outlined Button, Icon Button, Floating Action Button)

Material buttons enable users to take action, make choices, submit forms, save data, and open new pages with just a single click. User interaction with controls is triggered when they are tapped. Flutter apps commonly use these features. To use buttons, you must import the Material Components package for flutter, namely “package: flutter/material.dart”. Deprecated and un-deprecated controls are classified according to their classification. It is only compatible with material apps.

Types of Buttons:-

Generally, buttons fall into the following categories:-

1. Text Button
2. Elevated Button
3. Outlined Button
4. Icon Button
5. Floating Action Button

Let us discuss each button in detail:-

1. Text Button

Example:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(  
          appBar: AppBar(  
            centerTitle: true,
            title: const Text('ReadingDose'),  
          ),
      body: Center(
       child: TextButton(
           child: const Text(
                "Text Button",
                style: TextStyle(
                  color: Colors.blue,
                  fontWeight: FontWeight.bold
                ),
              ),
              onPressed: () {},
            ),
      ),
      );
  }
}

Output:-

2. Elevated Button

Example:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(  
          appBar: AppBar(  
            centerTitle: true,
            title: const Text('ReadingDose'),  
          ),
      body: Center(
       child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      elevation: 12.0,
                      textStyle: const TextStyle(color: Colors.white)),
                  child: const Text('Elevated Button'),
                ),
      ),
      );
  }
}

Output:-

3. Outlined Button

Example:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(  
          appBar: AppBar(  
            centerTitle: true,
            title: const Text('ReadingDose'),  
          ),
      body: Center(
       child: OutlinedButton(
               child: const Text(
                "Outlined Button",
                style: TextStyle(
                  color: Colors.blue,
                ),
              ),
              onPressed: () {},
            ),
      ),
      );
  }
}

Output:-

4. Icon Button

Example:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(  
          appBar: AppBar(  
            centerTitle: true,
            title: const Text('ReadingDose'),  
          ),
      body: Center(
       child: IconButton(
           splashColor: Colors.blue,
              icon: Icon(Icons.code),
              color: Colors.blue,
              onPressed: () {},
            ),
      ),
      );
  }
}

Output:-

5. Floating Action Button

Example:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(  
          appBar: AppBar(  
            centerTitle: true,
            title: const Text('ReadingDose'),  
          ),
      floatingActionButton: FloatingActionButton(  
        child: Icon(Icons.add),  
        backgroundColor: Colors.blue,  
        foregroundColor: Colors.white,  
        onPressed: () => {},  
      ), 
      );
  }
}

Output:-