Flutter シリーズ記事 - 実践的なプロジェクト

情報 2023-08-26 06:04:08 訪問数: null

この記事では、実践的な Flutter アプリケーションを使用して、データベースへの保存、HTTP リクエストの作成など、最近学んだ知識を包括的に適用します。ユーザーが入力した都市名に従って都市の気象情報を取得し、ユーザーがクエリした都市のリストをローカル データベースに保存できる、シンプルな天気アプリケーションを開発します。

ステップ 1: 要件の分析と設計

1. プロジェクトの目標を特定する

私たちの目標は、ユーザーがアプリケーションに都市名を入力すると、その都市の気象情報を取得できる天気アプリケーションを開発することです。

2. デザインインターフェイス

私たちのアプリは 2 つのページで構成されています。都市名の入力と気象情報を表示するメイン ページと、ユーザーがクエリした都市のリストを表示するクエリ履歴ページです。

ステップ 2: 開発

1. Flutterプロジェクトを作成する

まず、コマンドラインで新しい Flutter プロジェクトを作成します。

flutter create my_first_flutter_app

次に、プロジェクト ディレクトリを入力します。

cd my_first_flutter_app

2. コーディングの実装

a. ページとルートを作成する

lib フォルダーに home_page.dart、history_page.dart という 2 つのファイルを作成します。

home_page.dart：

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String city = '';
  String weather = '';

  void getWeather() async {
    final response = await http.get(Uri.parse(
        'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUY_API_KEY'));

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      setState(() {
        weather =
            'Temperature: ${data['main']['temp']}°C, Weather: ${data['weather'][0]['main']}';
      });
    } else {
      setState(() {
        weather = 'Failed to get weather data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              onChanged: (value) {
                setState(() {
                  city = value;
                });
              },
              decoration: InputDecoration(labelText: 'City Name'),
            ),
            ElevatedButton(
              onPressed: () {
                getWeather();
              },
              child: Text('Get Weather'),
            ),
            SizedBox(height: 20),
            Text(
              weather,
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

歴史ページ.ダーツ：

import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/database_helper.dart';
import 'package:my_first_flutter_app/city.dart';

class HistoryPage extends StatefulWidget {
  @override
  _HistoryPageState createState() => _HistoryPageState();
}

class _HistoryPageState extends State<HistoryPage> {
  List<City> cities = [];

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

  void fetchCities() async {
    final dbHelper = DatabaseHelper.instance;
    final allRows = await dbHelper.queryAllRows();
    setState(() {
      cities = allRows.map((row) => City.fromMap(row)).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search History'),
      ),
      body: ListView.builder(
        itemCount: cities.length,
        itemBuilder: (context, index) {
          final city = cities[index];
          return ListTile(
            title: Text(city.name),
            subtitle: Text('Weather: ${city.weather}'),
          );
        },
      ),
    );
  }
}

main.dart ファイルでルートを設定します。

import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/home_page.dart';
import 'package:my_first_flutter_app/history_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/history': (context) => HistoryPage(),
      },
    );
  }
}

b.データベース機能の実現

SQLite を使用して、ユーザーがクエリする都市のリストを保存します。データベースを作成および管理するために、lib フォルダーに新しいファイル city.dart、database_helper.dart を作成します。

シティダーツ

class City {
  int id;
  String name;
  String weather;

  City({this.id = 0, required this.name, required this.weather});

  Map<String, dynamic> toMap() {
    return {'id': id, 'name': name, 'weather': weather};
  }

  City.fromMap(Map<String, dynamic> map)
      : id = map['id'],
        name = map['name'],
        weather = map['weather'];
}

データベースヘルパー.dart

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'package:my_first_flutter_app/city.dart';

class DatabaseHelper {
  static final _databaseName = 'weather_database.db';
  static final _databaseVersion = 1;

  static final table = 'cities';

  static final columnId = '_id';
  static final columnName = 'name';
  static final columnWeather = 'weather';

  DatabaseHelper._privateConstructor();
  static final DatabaseHelper instance = DatabaseHelper._privateConstructor();

  static Database? _database;
  Future<Database?> get database async {
    if (_database != null) return _database;
    _database = await _initDatabase();
    return _database;
  }

  _initDatabase() async {
    String path = join(await getDatabasesPath(), _databaseName);
    return await openDatabase(path,
        version: _databaseVersion, onCreate: _onCreate);
  }

  Future<void> _onCreate(Database db, int version) async {
    await db.execute('''
          CREATE TABLE $table (
            $columnId INTEGER PRIMARY KEY,
            $columnName TEXT NOT NULL,
            $columnWeather TEXT NOT NULL
          )
          ''');
  }

  Future<int> insert(City city) async {
    Database? db = await instance.database;
    return await db?.insert(table, city.toMap()) ?? 0;
  }

  Future<List<Map<String, dynamic>>> queryAllRows() async {
    Database? db = await instance.database;
    return await db?.query(table) ?? [];
  }
}

ステップ 3: テスト

1. アプリケーションを実行する

次のコマンドを使用して、エミュレータまたは実際のデバイスでアプリを実行します。

flutter run

アプリが期待どおりに動作していることを確認し、あなたの都市の天気をクエリしてクエリ履歴を表示できることを確認してください。

2. 単体テストと結合テストの実施

手動テストに加えて、アプリケーションの安定性と正確性を確認するために単体テストと統合テストも実施する必要があります。Flutter では、テストに flutter_test パッケージを使用できます。

ステップ 4: 公開する

開発とテストが完了したら、アプリケーションのリリースを検討できます。公開する前に、次の手順を完了する必要があります。

1.APKまたはIPAファイルを生成します

次のコマンドを使用して、APK ファイル (Android) または IPA ファイル (iOS) を生成します。

flutter build apk
flutter build ios

2. 開発者アカウントを申請する

アプリケーション ストア (Google Play や​​ App Store など) に公開したい場合は、開発者アカウントを申請し、対応する公開ガイドラインに従う必要があります。

3. 申請書を提出する

APK または IPA ファイルを準備して開発者アカウントを申請したら、レビューとリリースのために適切なアプリ ストアにアプリを送信できます。

要約する

この記事では、最近学んだことと、データベースへの保存、HTTP リクエストの作成などの簡単な天気アプリケーションの例を組み合わせました。この実践的なプロジェクトを通じて、Flutter アプリケーションの開発プロセスをより深く理解し、実際のプロジェクトで共通の技術とベスト プラクティスを習得することができます。

この実践的なプロジェクトがお役に立てば幸いです。ご質問がある場合、またはさらに指導が必要な場合は、お気軽にお問い合わせください。Flutter 開発の旅の頑張ってください!

おすすめ

転載: blog.csdn.net/xudepeng0813/article/details/132159843
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com