FlutterとPythonでアプリを作ろう

こんにちは！今回は、FlutterとFlask Pythonを使って、シンプルだけど便利な従業員管理アプリを作っていきます。モバイルアプリとバックエンドの両方を扱うので、フルスタック開発の良い練習になりますよ。それでは、始めましょう！

第1章: プロジェクトのセットアップ

まずは、必要なツールをインストールしましょう。FlutterとFlaskの環境を整えます。

# Flutterのインストール
flutter pub get

# Flaskのインストール
pip install flask flask-sqlalchemy

これで準備完了！次は、プロジェクトの構造を作っていきます。

第2章: Flaskバックエンドの作成

バックエンドから始めましょう。app.pyファイルを作成し、以下のコードを書きます。

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///employees.db'
db = SQLAlchemy(app)

class Employee(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    position = db.Column(db.String(100), nullable=False)

@app.route('/employees', methods=['GET', 'POST'])
def handle_employees():
    if request.method == 'POST':
        data = request.json
        new_employee = Employee(name=data['name'], position=data['position'])
        db.session.add(new_employee)
        db.session.commit()
        return jsonify({"message": "Employee added successfully"}), 201
    
    employees = Employee.query.all()
    return jsonify([{"id": e.id, "name": e.name, "position": e.position} for e in employees])

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

employeeテーブルは以下のSQLで作れます

CREATE TABLE employee (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(100) NOT NULL,
    position VARCHAR(100) NOT NULL
);

これで、従業員の追加と一覧表示ができるAPIができました！

第3章: Flutterプロジェクトの作成

次は、Flutterでモバイルアプリを作ります。新しいプロジェクトを作成しましょう。

flutter create employee_management_app
cd employee_management_app

第4章: Flutterで従業員一覧画面の作成

lib/main.dartファイルを編集して、従業員一覧画面を作ります。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '従業員管理アプリ',
      home: EmployeeList(),
    );
  }
}

class EmployeeList extends StatefulWidget {
  @override
  _EmployeeListState createState() => _EmployeeListState();
}

class _EmployeeListState extends State<EmployeeList> {
  List<dynamic> employees = [];

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

  fetchEmployees() async {
    final response = await http.get(Uri.parse('http://localhost:5000/employees'));
    if (response.statusCode == 200) {
      setState(() {
        employees = json.decode(response.body);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('従業員一覧')),
      body: ListView.builder(
        itemCount: employees.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(employees[index]['name']),
            subtitle: Text(employees[index]['position']),
          );
        },
      ),
    );
  }
}

これで、従業員一覧が表示されるアプリの基本部分ができました！

第5章: 従業員追加機能の実装

次は、新しい従業員を追加する機能を実装しましょう。

// _EmployeeListStateクラスに以下のメソッドを追加

void _addEmployee() {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      String name = '';
      String position = '';
      return AlertDialog(
        title: Text('新しい従業員を追加'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(labelText: '名前'),
              onChanged: (value) {
                name = value;
              },
            ),
            TextField(
              decoration: InputDecoration(labelText: '役職'),
              onChanged: (value) {
                position = value;
              },
            ),
          ],
        ),
        actions: <Widget>[
          TextButton(
            child: Text('キャンセル'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: Text('追加'),
            onPressed: () {
              _submitEmployee(name, position);
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

void _submitEmployee(String name, String position) async {
  final response = await http.post(
    Uri.parse('http://localhost:5000/employees'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'name': name,
      'position': position,
    }),
  );

  if (response.statusCode == 201) {
    fetchEmployees();  // 一覧を更新
  }
}

// buildメソッド内のScaffoldにfloatingActionButtonを追加
floatingActionButton: FloatingActionButton(
  onPressed: _addEmployee,
  tooltip: '従業員を追加',
  child: Icon(Icons.add),
),

これで、新しい従業員を追加する機能が実装できました！

第6章: エラーハンドリングとUI改善

アプリをより使いやすくするために、エラーハンドリングとUIの改善を行いましょう。

// _EmployeeListStateクラスに以下のメソッドを追加

void _showSnackBar(String message) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text(message)),
  );
}

// _submitEmployeeメソッドを以下のように修正

void _submitEmployee(String name, String position) async {
  if (name.isEmpty || position.isEmpty) {
    _showSnackBar('名前と役職を入力してください');
    return;
  }

  try {
    final response = await http.post(
      Uri.parse('http://localhost:5000/employees'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'name': name,
        'position': position,
      }),
    );

    if (response.statusCode == 201) {
      fetchEmployees();
      _showSnackBar('従業員を追加しました');
    } else {
      _showSnackBar('エラーが発生しました');
    }
  } catch (e) {
    _showSnackBar('ネットワークエラーが発生しました');
  }
}

これで、エラーメッセージが表示されるようになり、ユーザー体験が向上しました！

第7章: アプリのテストと配布

最後に、アプリのテストと配布の準備をしましょう。

ユニットテストの作成
ウィジェットテストの作成
インテグレーションテストの実行
ビルドとリリース準備

# テストの実行
flutter test

# リリースビルドの作成（Android用）
flutter build apk

# リリースビルドの作成（iOS用）
flutter build ios

これで、従業員管理アプリの開発が完了しました！FlutterとFlask Pythonを使って、シンプルながら機能的なアプリを作ることができましたね。

このアプリをベースに、さらに機能を追加したり、デザインを改善したりして、自分だけのオリジナルアプリを作ってみてください。頑張ってください！