Display Outlined Button in Flutter

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.

import 'package:flutter/material.dart';

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

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

  State<MyApp> createState() => _MyAppState();

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

Leave a Comment

Cancel reply

Your email address will not be published.