[flutter] 플러터 get과 텍스트 입력 필드

26 Dec 2023

flutter

플러터 앱에서 GET 요청을 보내려면, http 패키지를 사용하여 편리하게 요청을 수행할 수 있습니다.

먼저, 플러터 프로젝트의 pubspec.yaml 파일에 http 패키지를 추가해야 합니다.

dependencies:
  http: ^0.14.0

다음으로, http 패키지를 가져와서 GET 요청을 보낼 수 있습니다.

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

void fetchData() async {
  var url = Uri.parse('https://api.example.com/data');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    // 요청이 성공했을 때의 처리
    print(response.body);
  } else {
    // 요청이 실패했을 때의 처리
    print('Failed to fetch data');
  }
}

위의 코드에서는 http.get 메서드를 사용하여 GET 요청을 보내고, 응답을 처리하는 예시를 보여줍니다. 반환된 상태 코드를 통해 성공 또는 실패에 따라 적절한 처리를 수행할 수 있습니다.

텍스트 입력 필드 사용하기

플러터에서 텍스트 입력 필드를 사용하려면 TextField 위젯을 활용하면 됩니다. 다양한 옵션을 통해 원하는 형태의 텍스트 입력 필드를 만들 수 있습니다.

TextField(
  decoration: InputDecoration(
    hintText: 'Enter your name',
    labelText: 'Name',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  onChanged: (text) {
    // 텍스트가 변경될 때마다 수행할 작업
    print('Current text: $text');
  },
)

위의 코드에서는 TextField 위젯을 사용하여 힌트 텍스트 및 레이블을 추가했고, 텍스트가 변경될 때마다 onChanged 콜백을 통해 작업을 수행하는 방법을 보여줍니다.

플러터에서 GET 요청을 보내는 방법과 텍스트 입력 필드를 사용하는 방법을 살펴보았습니다. 이러한 기능들을 조합하여 원하는 앱을 개발할 수 있습니다.

참고 문헌:

https://flutter.dev/docs/cookbook/networking/fetch-data
https://flutter.dev/docs/cookbook/forms/text-input