flutter - 플러터와 flask(파이썬) 연동하기

왼: 플라스크 / 오: 플러터

 

이번엔 위의 사진처럼 플러터(프론트)와 플라스크(벡) 연동을 해보겠다.

 

파이썬과 플라스크가 설치되어 있다고 가정하고 진행해보겠다.

---

1. flask 설치 및 파이썬 파일 준비

먼저 플라스크를 설치

설치 방법은 터미널에 pip install flask 을 입력해주면 설치가 된다.

 

그후 파이썬 파일 준비

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def home():
    data = {'message': 'Hello, World!', 
            'user': '남빈'}
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

json 방식으로 메시지 : 헬로우 월드 / 유저 : 남빈라는 데이터가 담긴 간단한 파이썬 코드이다.

그 후 python 앱이름.py(ex-> python app.py)을 터미널에 입력을 하면

http://127.0.0.1:5000/ 이런식으로 서버 주소를 받게 되는데 이 주소에 들어간다.

여기서 중요한 점이 이 서버주소를 닫지 말고 들어가 있어야 한다는 점이다

서버주소가 열려있지 않으면 코드가 맞아서 프론트랑 연동이 안됨

---

2. 플러터와 연동

먼저  pubspec.yaml 이곳에 http: ^1.1.2를 추가해준다 

dependencies:

  http: ^1.1.2

 

그 후 코드 준비 연동과 관련된 부분은 주석으로 다 적어나서 이해하기 쉬울 것이다

코드는 서버 데이터를 화면에 나타내는 간단한 코드이다.

//플러터 + 플라스크 연동해보기
// 임포트 -->> 서버 가져올 변수 지정 -->> 서버에 요청 -->> 결과 출력

import 'dart:convert';

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

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

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

  @override
  // ignore: library_private_types_in_public_api
  _MyAppState createState() => _MyAppState();
}

//2단계 -->> 변수들 지정 (메시지 : 헬로우 월드 / 유저 : 남빈)
class _MyAppState extends State<MyApp> {
  String serverMessage = '';
  String serverUser = '';

  @override
  void initState() {
    super.initState();
    // 3단계 -> 앱이 처음 시작될 때 서버에 요청 보내기
    fetchServerData();
  }

  Future<void> fetchServerData() async {
    //플라스크 서버 주소
    const String serverUrl = 'http://127.0.0.1:5000/';

    try {
      // GET 요청
      final response = await http.get(Uri.parse(serverUrl));

      // 응답 처리
      if (response.statusCode == 200) {
        // JSON 데이터 가져오기
        Map<String, dynamic> data = json.decode(response.body);

        // 서버 응답을 변수에 저장
        setState(() {
          serverMessage = data['message']; //헬로우 월드
          serverUser = data['user']; //남빈
        });
      } else {
        // 오류 처리
        setState(() {
          serverMessage = '서버 응답 오류: ${response.statusCode}';
          serverUser = ''; // 오류 발생 시 user를 비우거나 다른 값으로 초기화
        });
      }
    } catch (e) {
      // 에러 처리
      setState(() {
        serverMessage = '에러: $e';
        serverUser = ''; // 에러 발생 시 user를 비우거나 다른 값으로 초기화
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('플러터 파이썬 연동해보기'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 서버에서 가져온 데이터
              Text(
                '메시지: $serverMessage',
                style: const TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 10),

              Text(
                '사용자: $serverUser',
                style: const TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}

이러면 끝이다.

정말 코드 몇줄로 프론트와 벡을 연동할 수 있는 게 신기했다

이번엔 벡 -> 프론트 이렇게 진행을 해봤지만

다음엔 프론트 -> 벡 이렇게도 진행해보겠다.