Flutter と Django を使ったモバイルアプリ開発の基礎

記事の目的

こんにちは。私は大学二年生で、IT業界にエンジニアとして就職することを目標として、日々アプリ開発に励んでいます。今回は、モバイルアプリ開発の初期段階で Flutter と Django を使ってデータベース（PostgreSQL）と接続する方法 を学んだので、自分のためにまとめておきます。

---

必要なパッケージのインストール

Flutter のパッケージ

Flutter で API を利用するために、dio パッケージを追加します。

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0

ターミナルで次のコマンドを実行して、パッケージをインストールします。

flutter pub get

---

Django + PostgreSQL のセットアップ

1. 仮想環境の作成と Django のインストール

まず、Python の仮想環境を作成し、Django と PostgreSQL に接続するための psycopg2 をインストールします。

# 仮想環境の作成
python -m venv env

# 仮想環境の有効化（Windows）
env\Scripts\activate

# Django と psycopg2 のインストール
pip install django psycopg2

2. Django プロジェクトの作成と設定

プロジェクトディレクトリを作成し、Django プロジェクトを初期化します。

# Django プロジェクトの作成
django-admin startproject myproject
cd myproject

# アプリの作成
python manage.py startapp myapp

次に、settings.py で PostgreSQL を設定します。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'testdb',  # データベース名
        'USER': 'postgres',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '5432',
        'OPTIONS': {
            'client_encoding': 'UTF8',
        },
    }
}

3. マイグレーションの実行

データベースのマイグレーションを行い、テーブルを作成します。

python manage.py makemigrations myapp
python manage.py migrate

4. スーパーユーザーの作成

管理画面にアクセスするためのスーパーユーザーを作成します。

python manage.py createsuperuser

---

Django の API を作成

Flutter からデータを取得するために、Django REST Framework（DRF）を使って API を作成します。

1. DRF のインストール

pip install djangorestframework

2. views.py の作成

from rest_framework.response import Response
from rest_framework.decorators import api_view
from .models import User
from .serializers import UserSerializer

@api_view(['GET'])
def get_users(request):
    users = User.objects.all()
    serializer = UserSerializer(users, many=True)
    return Response(serializer.data)

3. urls.py の設定

from django.urls import path
from .views import get_users

urlpatterns = [
    path('users/', get_users, name='get_users'),
]

4. Django サーバーの起動

python manage.py runserver

---

Flutter から Django の API にリクエストを送る

Flutter から Django の API にリクエストを送信し、データを取得します。

1. api_service.dart を作成

import 'package:dio/dio.dart';

class ApiService {
  final Dio _dio = Dio();
  final String baseUrl = "http://127.0.0.1:8000/api/";

  Future<List<dynamic>> fetchUsers() async {
    final response = await _dio.get("${baseUrl}users/");
    return response.data;
  }
}

2. UI にデータを表示

import 'package:flutter/material.dart';
import 'api_service.dart';

class UserListScreen extends StatefulWidget {
  @override
  _UserListScreenState createState() => _UserListScreenState();
}

class _UserListScreenState extends State<UserListScreen> {
  final ApiService apiService = ApiService();
  List<dynamic> users = [];

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  void fetchUsers() async {
    final data = await apiService.fetchUsers();
    setState(() {
      users = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ユーザー一覧")),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(users[index]['name']),
            subtitle: Text(users[index]['email']),
          );
        },
      ),
    );
  }
}

---

まとめ

今回は、Flutter と Django を連携させ、PostgreSQL を使ってデータを管理する方法を学びました。

✅ Django のセットアップ（PostgreSQL の設定）
✅ Django REST Framework で API を作成
✅ Flutter から API にリクエストを送信し、データを表示

実際のアプリ開発では、認証やエラーハンドリングも考慮する必要がありますが、まずはこの基本を押さえておけばスムーズに開発が進められると思います！