[Linux/Flutter] 플러터 버튼 UI 추가 및 클릭 이벤트 예제(ElevatedButton)

 

목차

1. 리눅스 Flutter Android, iOS 앱 프로젝트 만들기 예제 이전 포스팅 링크 및 설명
2. 리눅스 Flutter 간단한 문자열 출력 앱 만들기 예제 이전 포스팅 링크 및 설명
3. 리눅스 Flutter "Android license status unknown" 에러 대응 방법 예제 이전 포스팅 링크 및 설명
4. 리눅스 Flutter 버튼 UI 추가 및 클릭 이벤트 설정 예제(클릭시 문자열 변경)
5. 리눅스 Flutter 예제 실행 및 결과 확인

 

 

 

 

 

 

 

 

 

리눅스 Flutter Android, iOS 앱 프로젝트 만들기 예제 이전 포스팅 링크 및 설명

리눅스 환경에서 Flutter를 이용해 Android와 iOS 앱 프로젝트를 어떻게 시작하는지에 대해 이전에 포스팅을 했었습니다. 이것은 우리가 앱을 만들기 위한 첫걸음이었습니다. 여기서는 Flutter의 첫 프로젝트를 생성하는 과정과 그에 따른 디렉토리 구조를 설명하고 있습니다. 이전 포스팅에서는 Flutter 프로젝트의 기본 구조와 각 부분의 역할에 대해 상세히 다루었습니다. Flutter SDK 경로를 지정함으로써 신규 앱 생성이 가능하였습니다. 이러한 예제 포스팅을 통해 Flutter 프로젝트의 전반적인 흐름을 이해하는데 도움이 됩니다. 이전 포스팅을 참조하시면 좋습니다.

 

2024.01.24 - [Flutter] - [Linux/Flutter] 플러터 개발 환경 구성 예제 - 5(Android, iOS 지원 플러터 앱 프로젝트 생성 예제)

[Linux/Flutter] 플러터 개발 환경 구성 예제 - 5(Android, iOS 지원 플러터 앱 프로젝트 생성 예제)

 

 

 

 

 

 

 

리눅스 Flutter 간단한 문자열 출력 앱 만들기 예제 이전 포스팅 링크 및 설명

다음으로 Flutter를 이용해 가장 기초적인 문자열 출력 앱을 만드는 방법에 대한 이전 포스팅을 확인해보세요. 이 포스팅에서는 Flutter의 기본적인 구조를 이용해 'Hello, World!'라는 간단한 문자열을 화면에 출력하는 앱을 만드는 과정을 상세히 설명하고 있습니다. 이를 통해 Flutter의 기초적인 구조와 위젯 사용법을 익힐 수 있습니다. 이전 포스팅에서 다룬 내용을 참고하시면 Flutter를 이용한 앱 개발에 있어 좋은 시작점이 될 것입니다.

 

2024.01.24 - [Flutter] - [Linux/Flutter] 플러터 Hello World 출력 간단 앱 만들기 예제(StatelessWidget 및 Text 문자열 생성)

[Linux/Flutter] 플러터 Hello World 출력 간단 앱 만들기 예제(StatelessWidget 및 Text 문자열 생성)

 

 

 

 

 

 

 

리눅스 Flutter "Android license status unknown" 에러 대응 방법 예제 이전 포스팅 링크 및 설명

마지막으로 Flutter에서 'Android license status unknown'이라는 에러를 어떻게 처리하는지에 대해 이전에 포스팅을 했었습니다. 이 에러는 Android SDK의 라이선스 상태를 알 수 없을 때 발생하는데, 이를 해결하는 방법을 자세히 설명하고 있습니다. 이전 포스팅에서는 에러의 원인과 해결책을 제시하고 있으니, 이와 같은 문제가 발생했을 때 참고하시면 좋습니다. 특히 Flutter doctor 명령 등을 실행했을 때 위와 같은 에러가 발생한다면 아래 포스팅을 참고해주세요.

 

2024.01.23 - [Flutter] - [Linux/Flutter] 플러터 "Error: LinkageError occurred while loading (class file version 61.0)" 에러 고치기 예제

[Linux/Flutter] 플러터 "Error: LinkageError occurred while loading (class file version 61.0)" 에러 고치기 예제

 

 

 

 

 

 

 

리눅스 Flutter 버튼 UI 추가 및 클릭 이벤트 설정 예제(클릭시 문자열 변경)

아래는 Flutter에서 버튼 UI를 추가하고 클릭 이벤트를 설정하는 방법에 대한 예제입니다. 버튼 위젯을 추가하고, 이 버튼이 클릭되었을 때 문자열이 변경되는 예제입니다. 이를 통해 Flutter에서의 이벤트 처리 방식을 이해할 수 있습니다. 아래의 예제 코드를 참고하여 Flutter에서의 버튼 사용법과 이벤트 처리 방법에 대해 확인해보세요.

 

Flutter에서 ElevatedButton 을 활용한 예제입니다. StatelessWidget을 이용하여 홈 뷰를 구성하고 MyHomePage 이름의 StatefulWidget 클래스를 이용하여 문자열 Text 객체와 버튼 ElebvatedButton 객체를 Child로 추가합니다. 이후 onPressed 이벤트 콜백으로 인해 _changeText 함수가 불리면서 setState를 통해 문자열을 수정합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _text = 'Hello Flutter!';

  void _changeText() {
    setState(() {
      _text = 'You clicked the button!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_text),
            ElevatedButton(
              onPressed: _changeText,
              child: Text('Click me'),
            ),
          ],
        ),
      ),
    );
  }
}

 

Flutter에서 body에 Center를 주어 가운데 정렬하고 child에서 문자열과 ElevatedButton을 만든 모습

 

 

 

 

 

리눅스 Flutter 예제 실행 및 결과 확인

아래는 버튼 클릭 이벤트 예제 앱을 실행하고 결과를 확인한 모습입니다. Flutter 앱에서 출력된 버튼을 클릭하면 기존 문자열이 변경됩니다. 이처럼 Flutter에서 버튼 클릭 이벤트를 설정하고 이에 따른 처리 코드를 직접 구현할 수 있습니다.

 

1. 안드로이드 스튜디오에서 main.dart 예제를 안드로이드 가상 에뮬레이터에서 실행

Launching lib/main.dart on Android SDK built for x86 in debug mode...
...

 

Flutter 앱에서 버튼을 누르기 이전엔 "Hello Flutter!" 라는 문자열이 나타난다.

 

이후 버튼을 클릭하면 _MyHomePageState 클래스의 setState 함수로 _text 문자열을 수정하는 모습