Display Outlined Button in Flutter

An outlined button is a rectangle shaped button that decorated with rounded corners. It is a Material Design button.

A OutlinedButton class is used for creating an outlined button. By default, the background color of a button is transparent. By default, the border is a one pixel wide gray with rounded corners.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Outlined button')),
        body: Center(
            child: OutlinedButton(
          child: const Text('Add'),
          onPressed: () {
            print('Pressed');
          },
        )));
  }
}