Flutter는 Google에서 개발한 UI 프레임워크로, 하나의 코드로 iOS와 Android 앱을 동시에 개발할 수 있습니다. Flutter에서 RaisedButton 위젯을 사용하여 버튼을 만들고, 이 버튼을 누를 때 스피너를 동작시키는 방법에 대해 알아보겠습니다.

RaisedButton 생성

RaisedButton을 생성하기 위해 먼저 RaisedButton 위젯을 사용해야 합니다. 아래의 코드를 사용하여 RaisedButton을 생성할 수 있습니다.

RaisedButton(
  onPressed: () {
    // 버튼을 눌렀을 때 동작할 코드
  },
  child: Text("버튼"),
),

스피너 동작시키기

RaisedButton을 누른 후에 스피너를 동작시키기 위해서는 setState 메소드를 사용해야 합니다. 아래의 코드는 RaisedButton을 눌렀을 때 스피너를 동작시키는 예제입니다.

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _loading = false;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        setState(() {
          _loading = true;
        });
        // 스피너 동작 후에 수행해야 할 작업
      },
      child: _loading ? CircularProgressIndicator() : Text("버튼"),
    );
  }
}

위의 예제에서 _loading 변수는 스피너의 상태를 나타내는 불리언 값입니다. setState 메소드는 _loading 변수를 변경하고 UI를 다시 빌드하기 위해 호출됩니다. CircularProgressIndicator 위젯은 스피너를 나타냅니다. _loading 값이 참일 때는 스피너가 나타나고, 거짓일 때는 “버튼” 이라는 텍스트가 나타납니다.

이제 RaisedButton을 누를 때 스피너를 동작시킬 수 있습니다!

참고 자료

• Flutter 공식 문서