Skip to main content

Linear Button

Filled Button​

Button Image

import 'package:flutter/material.dart';
FilledButton(
  onPressed: () {},
  style: const ButtonStyle(
    shape: WidgetStatePropertyAll(
      LinearBorder(
        side: BorderSide(
          width: 3,
          color: Colors.blue,
        ),
        top: LinearBorderEdge(),
        bottom: LinearBorderEdge(),
      ),
    ),
  ),
  child: const Text('Filled Button'),
),

Outlined Button​

Button Image

import 'package:flutter/material.dart';
OutlinedButton(
  onPressed: () {},
  style: const ButtonStyle(
    side: WidgetStatePropertyAll(
      BorderSide(
        width: 3,
        color: Colors.blue,
      ),
    ),
    shape: WidgetStatePropertyAll(
      LinearBorder(
        top: LinearBorderEdge(),
        bottom: LinearBorderEdge(),
      ),
    ),
  ),
  child: const Text('Outlined Button'),
),

Elevated Button​

Button Image

import 'package:flutter/material.dart';
ElevatedButton(
  onPressed: () {},
  style: const ButtonStyle(
    shape: WidgetStatePropertyAll(
      LinearBorder(
        side: BorderSide(
          width: 3,
          color: Colors.blue,
        ),
        top: LinearBorderEdge(),
        bottom: LinearBorderEdge(),
      ),
    ),
  ),
  child: const Text('Elevated Button'),
),

Text Button​

Button Image

import 'package:flutter/material.dart';
TextButton(
  onPressed: () {},
  style: const ButtonStyle(
    shape: WidgetStatePropertyAll(
      LinearBorder(
        side: BorderSide(
          width: 3,
          color: Colors.blue,
        ),
        top: LinearBorderEdge(),
        bottom: LinearBorderEdge(),
      ),
    ),
  ),
  child: const Text('Text Button'),
),