// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; /// Flutter code sample for [FloatingActionButton]. void main() => runApp(const FloatingActionButtonExampleApp()); class FloatingActionButtonExampleApp extends StatelessWidget { const FloatingActionButtonExampleApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(useMaterial3: true), home: const FloatingActionButtonExample(), ); } } class FloatingActionButtonExample extends StatelessWidget { const FloatingActionButtonExample({super.key}); @override Widget build(BuildContext context) { final ColorScheme colorScheme = Theme.of(context).colorScheme; Widget titleBox(String title) { return DecoratedBox( decoration: BoxDecoration( color: colorScheme.inverseSurface, borderRadius: BorderRadius.circular(4), ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), child: Text(title, style: TextStyle(color: colorScheme.onInverseSurface)), ), ); } return Scaffold( appBar: AppBar( title: const Text('FAB Additional Color Mappings'), ), body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ // Surface color mapping. Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ FloatingActionButton.large( foregroundColor: colorScheme.primary, backgroundColor: colorScheme.surface, onPressed: () { // Add your onPressed code here! }, child: const Icon(Icons.edit_outlined), ), const SizedBox(height: 20), titleBox('Surface'), ], ), // Secondary color mapping. Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ FloatingActionButton.large( foregroundColor: colorScheme.onSecondaryContainer, backgroundColor: colorScheme.secondaryContainer, onPressed: () { // Add your onPressed code here! }, child: const Icon(Icons.edit_outlined), ), const SizedBox(height: 20), titleBox('Secondary'), ], ), // Tertiary color mapping. Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ FloatingActionButton.large( foregroundColor: colorScheme.onTertiaryContainer, backgroundColor: colorScheme.tertiaryContainer, onPressed: () { // Add your onPressed code here! }, child: const Icon(Icons.edit_outlined), ), const SizedBox(height: 20), titleBox('Tertiary'), ], ), ], ), ), ); } }