Flutter 플러터 ElevatedButton class 정의 및 간단사용법

1. ElevatedButton 의미

---

입체적인,, 솟아올라온 모양의 높은 버튼,, 상승되어 보이는 버튼,, 정도로 이해하면 될 것 같습니다

 

2. ElevatedButton 예제

---

비활성화 버튼과 활성화 버튼 두가지 예제 입니다. 아래 소스 코드와 화면을 참고해주세요

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    final ButtonStyle style =
        ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                style: style,
                onPressed: null,
                child: const Text('Disabled'),
              ),
              const SizedBox(height: 30),
              ElevatedButton(
                style: style,
                onPressed: () {},
                child: const Text('Enabled'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

---

onPressed: null 과 함수사용 차이가 활성화 비활성화를 표현한다.

---

추가로 버튼 스타일의 속성입니다. 위에서는 size 만 사용했지만 아래와 같은 속성을 활용해서 버튼 스타일을 꾸며줄 수 있습니다

ButtonStyle styleFrom({
    Color? foregroundColor,
    Color? backgroundColor,
    Color? disabledForegroundColor,
    Color? disabledBackgroundColor,
    Color? shadowColor,
    Color? surfaceTintColor,
    Color? iconColor,
    Color? disabledIconColor,
    Color? overlayColor,
    double? elevation,
    TextStyle? textStyle,
    EdgeInsetsGeometry? padding,
    Size? minimumSize,
    Size? fixedSize,
    Size? maximumSize,
    BorderSide? side,
    OutlinedBorder? shape,
    MouseCursor? enabledMouseCursor,
    MouseCursor? disabledMouseCursor,
    VisualDensity? visualDensity,
    MaterialTapTargetSize? tapTargetSize,
    Duration? animationDuration,
    bool? enableFeedback,
    AlignmentGeometry? alignment,
    InteractiveInkFeatureFactory? splashFactory,
    ButtonLayerBuilder? backgroundBuilder,
    ButtonLayerBuilder? foregroundBuilder,
  })