[flutter] 플러터 Checkbox 웹페이지 연동 기능 추가하기

07 Dec 2023

flutter

소개

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 프레임워크이며, 웹, iOS 및 Android 앱을 개발할 수 있습니다. 이번에는 플러터 CheckBox 위젯을 사용하여 웹페이지와의 연동 기능을 추가하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

웹페이지와의 연동을 위해서 http 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

CheckBox 만들기

앱에서 CheckBox를 생성하기 위해 Checkbox 위젯을 사용합니다. 다음 예제 코드를 참고하여 CheckBox를 생성합니다:

import 'package:flutter/material.dart';

class MyCheckbox extends StatefulWidget {
  @override
  _MyCheckboxState createState() => _MyCheckboxState();
}

class _MyCheckboxState extends State<MyCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value!;
        });
      },
    );
  }
}

웹페이지와 연동하기

CheckBox의 상태 정보를 웹페이지와 연동하기 위해 http 패키지를 사용합니다. 매번 CheckBox 상태가 변경될 때마다 웹페이지로 상태를 전달하는 기능을 구현할 수 있습니다. 다음은 웹페이지로 CheckBox 상태를 전송하는 예제 코드입니다:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyCheckbox extends StatefulWidget {
  @override
  _MyCheckboxState createState() => _MyCheckboxState();
}

class _MyCheckboxState extends State<MyCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value!;
        });

        // CheckBox 상태를 웹페이지로 전송
        sendDataToWeb(isChecked);
      },
    );
  }

  void sendDataToWeb(bool isChecked) async {
    var url = Uri.parse('http://example.com/update_checkbox_status');
    var response = await http.post(url, body: {'isChecked': isChecked.toString()});
    print(response.body);
  }
}

위 코드에서 sendDataToWeb 함수는 http.post() 메서드를 사용하여 웹페이지로 CheckBox 상태를 전송합니다. 웹페이지에서는 해당 URL에 POST 요청을 처리하는 로직을 작성하여 CheckBox 상태를 업데이트할 수 있습니다.

결론

이제 플러터 CheckBox와 웹페이지와의 연동 기능을 추가하는 방법을 알아보았습니다. 이를 응용하여 웹페이지와 다양한 상호작용을 구현할 수 있습니다.