Flutter ElevatedButton 사용해 보기

안녕하세요.

이번 포스팅에서는 Flutter의 ElevatedButton을 간략하게 구현해 보겠습니다.

 

언어: dart

IDE: Android Studio

Framework: Flutter

Test device: Android

 

처음 flutter project를 생성하면 아래와 같은 코드가 기본으로 생성됩니다. 참고로 주석은 모두 지운 상태입니다.

main.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

위의 예시에서는 "FloatingActionButton"을 사용하고 있는데,

이를 "Elevated button"으로 변경하여 사용해 보겠습니다.

 

FloatingActionButton 부분을 삭제 후 Text의 바로 밑에 ElevatedButton을 아래와 같이 추가해 줍니다.

Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium,
),
ElevatedButton(
  onPressed: _incrementCounter,
  child: const Text('+'),
),

onPressed: 부분에 버튼 클릭 시 실행할 동작을 선언합니다. 예시에서는 _incrementCounter를 호출하여 실행하도록 되어있습니다.

child: 부분에는 버튼의 Text 등 버튼 내부를 구성하는 layout을 구현할 때 사용합니다. 여기서는 자세히 다루지 않고, Text 속성만 사용하겠습니다.

 

함수를 호출하지 않을 경우에는 아래와 같이 사용할 수 있습니다.

ElevatedButton(
  onPressed: () {
    setState(() {
      _counter++;
    });
  },
  child: const Text('+'),
),

이는 바로 위의 예시와 동일한 동작을 수행합니다.

 

아래는 전체 코드입니다.

main.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('+'),
            ),
          ],
        ),
      ),
    );
  }
}

 

에뮬레이터에서 돌려보겠습니다.

 

android device에서 실행한 결과입니다.

result

 

문제없이 동작하는 것을 확인할 수 있습니다.

 

이상 포스팅을 마치겠습니다.

 

감사합니다.