Flutterでアプリ開発 (Netflix風) その３

2024年10月5日2024年10月8日

1. 実際に作っていきます！
2. プロジェクト名の規則
3. おしゃれなログイン画面を作成。
4. まずは「Perplexity」
5. 続いてGPTさん

実際に作っていきます！

プロジェクト名：FamilyReel

flutter create family_reel

※(Flutterプロジェクト名の命名規則)

プロジェクト名の規則

すべて小文字を使用する

単語の区切りにはアンダースコア(_)を使用する

基本的なラテン文字とアラビア数字のみを使用する[a-z0-9_]

数字で始まらないこと

Dartの予約語を使用しないこと

$ flutter create family_reel
Creating project family_reel...
Resolving dependencies in family_reel... (2.2s)
Got dependencies in family_reel.
Wrote 129 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd family_reel
  $ flutter run

Your application code is in family_reel/lib/main.dart.

OK!

cd family_reel
fvm flutter run

[1]: macOS (macos)
[2]: Chrome (chrome)

> 2を選択

初回demo画面でました

おしゃれなログイン画面を作成。

以下のAI機能でデザインしてもらいます。

・Perplexity

・chatGPT

■□■□プロンプト■□■□

Flutterでアプリ作成したいです。

Dart言語を使用してサンプルソースの提供お願いします。

・おしゃれなログイン画面
・アニメーションもつける
・ログインID テキスト入力欄
・パスワードテキスト入力欄
・ログインボタン

まずは「Perplexity」

・出力されたソースをそのまま　lib/main.dart　へ貼り付けて
・パッケージのインストール

flutter pub get

悪くない、、！！

続いてGPTさん

ちょっと保守的かな？
プロンプトが曖昧で良くなかったかも

Perplexityを採用！

おしゃれなロゴ画像欲しいので canva で作成して追加する

画像ファイルの配置:

top_logo_Family.png を assets フォルダに配置します。まだフォルダがない場合は作成してください。

pubspec.yaml の更新:
pubspec.yaml ファイルに画像を使用するための設定を追加します。以下のように assets セクションを追加してください。
textflutter: assets: - assets/top_logo_Family.png

パッケージのインストール:

上記のコードでは、flutter_animate パッケージが必要です。まだインストールしていない場合は、前述の手順に従ってください。

アプリの再ビルド:

pubspec.yaml を更新した後、ターミナルで flutter pub get を実行し、アプリを再ビルドしてください。

画像の追加とログイン状態を保存できるように修正！

■□■□プロンプト■□■□

ロゴ画像もっと大きい方がいい

鍵アイコンはなくてもいいかもで、代わりになんか楽しくなるような文言つけよう

あとログインした時の状態を記憶して次回からは入力不要としたい

AI解答

 Text(
                      '家族の思い出を一緒に残そう！',

>家族の思い出を一緒に残そう！

絶妙にダサいっす。。。

英語も交えて１０文字前後で

AI解答

“Memories Matter!"

“Family First!"

“Cherish Together!"

“Keep Smiles Alive!"

“Share the Joy!"

“Together Forever!"

　　　　　　　・・・more

>> 4を採用！

ログイン画面・ホーム画面をそれぞれ作成、画面遷移できるようにしました

画面遷移のとこちょっとむずかったです。。

main.dart

    // ホーム画面へ遷移
    Navigator.of(context).pushReplacementNamed('/home');

ホーム画面から戻る時

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ホーム'),
        automaticallyImplyLeading: false, // 戻るボタンを非表示
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('ホーム画面へようこそ！'),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text('ログアウト'),
              onPressed: () {
                // ログイン画面に戻る
                Navigator.of(context).pushReplacementNamed('/login');
              },
            ),
          ],
        ),
      ),
    );
  }

で、この「/home」やら「/login」はナビゲーションとして処理を追加しないとあかん

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Family Video App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/login',                  // 追加
      routes: {　　　　　　　　　　　　　　　　　　　// 追加
        '/login': (context) => LoginPage(),　　// 追加
        '/home': (context) => HomePage(),　　　// 追加
      },
    );
  }
}

この辺りで「アーキテクチャ」についての考慮が漏れていたことが判明、、

プロンプト

そういえば　アーキテクチャ的なの考えてなかったです上記の新ファイルなど、どのようなファイル階層で管理するのが適切でしょうか

AI回答
アプリケーションのアーキテクチャと適切なファイル階層は、プロジェクトの規模や複雑さによって異なりますが、一般的に推奨される構造として「Feature-first」アプローチがあります。これは、機能ごとにフォルダを分け、その中で各レイヤーを管理する方法です。以下に、あなたのプロジェクトに適した階層構造の例を示します

lib/
├── core/
│   ├── constants/
│   ├── theme/
│   ├── utils/
│   └── widgets/
├── features/
│   ├── authentication/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   │       ├── screens/
│   │       │   └── login_page.dart
│   │       └── widgets/
│   │           └── animated_login_button.dart
│   └── home/
│       ├── data/
│       ├── domain/
│       └── presentation/
│           ├── screens/
│           │   └── home_page.dart
│           └── widgets/
├── main.dart
└── app.dart

な、、なるほど、
すごく丁寧ですな、、、　採用します　　　　続く..

Flutter,プログラミング

Posted by Teruruswdinc

Flutterでアプリ開発 (Netflix風) その４