💻
Flutter documentation
  • Flutter documentation
    • Starting an App
    • Import
  • Visual Studio Code
  • Widgets
    • Stateless Widget
    • Stateful Widget
    • Scaffold
    • Text
      • OverFlow
      • Rounded background text
    • Padding
    • Align
    • DraggableScrollableSheet
    • Container
    • Decorated box
    • Expanded
    • IntrinsicHeight
    • IntrinsicWidth
    • ListView.builder(...)
    • Buttons
    • Gauge
    • Navigator
      • WillPopScope
    • Web View
    • Divider
    • Future builder
    • Image
      • Cached_network_image
      • Fade In Image
    • ClipOval
    • InkWell
    • Wrap
    • SingleChildScrollView
    • Stack
    • FittedBox
    • DropdownButton
    • ValueListenableBuilder
    • Maps
    • fl_chart
    • Set SystemNavigation Bar Color
    • Onesignal
    • Builder
    • Set orientation
    • SSE
    • Chat
    • Flutter_animate
    • Supabase
      • Android
    • Changing name and package name
    • Sign apk/abb
  • Dart
    • If / Else in one line
    • Functions
  • Others
  • Airtable
Powered by GitBook
On this page
  • Contained button
  • Text button
  • RawMaterialButton
  1. Widgets

Buttons

Buttons are components that can be clicked

You need to install package:flutter/material.dart

There are different types of buttons:

Contained button

They display contained text

ElevatedButton(
  onPressed: () {
      // Respond to button press
  },
  child: Text('CONTAINED BUTTON'),
)

Also, you can add an Icon

ElevatedButton.icon(
  onPressed: () {
      // Respond to button press
  },
  icon: Icon(Icons.add, size: 18),
  label: Text("CONTAINED BUTTON"),
)

Text button

They only displays text

TextButton(
  onPressed: () {
      // Respond to button press
  },
  child: Text("TEXT BUTTON"),
)

Also, you can add an Icon

TextButton.icon(
  onPressed: () {
      // Respond to button press
  },
  icon: Icon(Icons.add, size: 18),
  label: Text("TEXT BUTTON"),
)

RawMaterialButton

RawMaterialButton(
          // We set the shape to a rounded rectangle
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(100.0)),
          // Set the fill color
          fillColor: Colors.white,
          // Create a SizedBox for the dimensions
          child: const SizedBox(
            height: 50,
            width: 200.0,
            // Center everything
            child: Center(
              // Create the button's text
              child: Text(
                'Crear cuenta 🎉',
                // Set the text color
                style: TextStyle(color: Colors.black),
              ),
            ),
          ),
          onPressed: () {
            // Button action
          },
        ),

https://material.io/components/buttons/flutter#toggle-button 👈 more button info

PreviousListView.builder(...)NextGauge

Last updated 2 years ago