Skip to main content

Rounded Rectangle Button

Filled Button​

Button Image

import 'package:flutter/material.dart';
FilledButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: WidgetStatePropertyAll(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
  ),
  child: const Text('Filled Button'),
),

Outlined Button​

Button Image

import 'package:flutter/material.dart';
OutlinedButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: WidgetStatePropertyAll(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
  ),
  child: const Text('Outlined Button'),
),

Elevated Button​

Button Image

import 'package:flutter/material.dart';
ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: WidgetStatePropertyAll(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
  ),
  child: const Text('Elevated Button'),
),

Text Button​

Button Image

import 'package:flutter/material.dart';
TextButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: WidgetStatePropertyAll(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
  ),
  child: const Text('Text Button'),
),