Flutter ElevatedButton 사용방법

다음 Flutter 애플리케이션에서 'Click Me'라는 텍스트와 함께 ElevatedButton을 표시할 것입니다.

main.dart

import 'package:flutter/material.dart';   void main() => runApp(const MyApp());   /// main application widget class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);     static const String _title = 'Flutter Tutorial';     @override   Widget build(BuildContext context) {     return const MaterialApp(       title: _title,       home: MyStatelessWidget(),     );   } }   /// stateless widget that the main application instantiates class MyStatelessWidget extends StatelessWidget {   const MyStatelessWidget({Key? key}) : super(key: key);     @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: const Text('ElevatedButton Tutorial')),       body: Center(         child: Column(           mainAxisSize: MainAxisSize.min,           children: <Widget>[             ElevatedButton(               onPressed: () { },               child: const Text('Click Me'),             ),           ],         ),       ),     );   } }

스크린샷 [안드로이드 에뮬레이터, ios 시뮬레이터]

ElevatedButton onPressed를 사용하고 클릭 이벤트 만들기

 onPressed  콜백을 사용하여 ElevatedButton을 눌렀을 때 함수를 실행할 수 있습니다. 다음 Flutter 애플리케이션에서는 ElevatedButton이 눌렸을 때 SnackBar를 표시할 것입니다.

main.dart

import 'package:flutter/material.dart';   void main() => runApp(const MyApp());   /// main application widget class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);     static const String _title = 'Flutter Tutorial';     @override   Widget build(BuildContext context) {     return const MaterialApp(       title: _title,       home: MyStatelessWidget(),     );   } }   /// stateless widget that the main application instantiates class MyStatelessWidget extends StatelessWidget {   const MyStatelessWidget({Key? key}) : super(key: key);     @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: const Text('ElevatedButton Tutorial')),       body: Center(         child: Column(           mainAxisSize: MainAxisSize.min,           children: <Widget>[             ElevatedButton(               onPressed: () {                 ScaffoldMessenger.of(context).showSnackBar(                     const SnackBar(content: Text('You pressed the button.')));               },               child: const Text('Click Me'),             ),           ],         ),       ),     );   } }

스크린샷 [안드로이드 에뮬레이터]

비활성화된 ElevatedButton

onPressed 또는 onLongPress 콜백이 null이면 ElevatedButton이 비활성화된 버튼으로 표시됩니다. 다음 Flutter 애플리케이션에서는 onPressed 또는 onLongPress 콜백이 설정되지 않은 ElevatedButton을 표시합니다.

main.dart

import 'package:flutter/material.dart';   void main() => runApp(const MyApp());   /// main application widget class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);     static const String _title = 'Flutter Tutorial';     @override   Widget build(BuildContext context) {     return const MaterialApp(       title: _title,       home: MyStatelessWidget(),     );   } }   /// stateless widget that the main application instantiates class MyStatelessWidget extends StatelessWidget {   const MyStatelessWidget({Key? key}) : super(key: key);     @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: const Text('ElevatedButton Tutorial')),       body: Center(         child: Column(           mainAxisSize: MainAxisSize.min,           children: <Widget>[             ElevatedButton(               onPressed: null,               child: const Text('disabled elevated button'),             ),           ],         ),       ),     );   } }

스크린샷 [안드로이드 에뮬레이터]