ChatGPTでアプリを作る Part2 スプラッシュ画面を作るといいらしい・・・？

ChatGPTでアプリを作ろうとしています、id:kouki_danです。

前回のPart1では、技術選定をChatGPT主導でやっていきました！

kouki.hatenadiary.com

次は、いよいよアプリ作成に入っていきましょう！

まずは、作るべき画面を聞いてみました！

正直、スプラッシュや冷凍庫一覧画面は本当に作るの？って感じがするのですが、今の僕はChatGPTの手足なので、受け入れるスタイルでいきます！

一気に作ることはできないので、作る順番を聞いてみました

どうやら、最初に教えてくれた画面は、作るべき順番に並べてくれていたみたいですね。早速スプラッシュ画面から作っていきましょう！

スプラッシュ画面の作り方を教えてください Flutterでスプラッシュ画面を作成する方法はいくつかありますが、ここではシンプルな方法を説明します。main.dartファイルのmain関数でスプラッシュ画面を表示し、一定時間経過後に次の画面（ログイン/サインアップ画面など）に遷移する方法です。まず、pubspec.yamlファイルに画像を表示するために使用するアセットを追加しましょう。例えば、assets/imagesディレクトリにあるsplash.pngを使用する場合、以下のように追加します。 yaml Copy code flutter: assets: - assets/images/splash.png 次に、main.dartファイルでスプラッシュ画面を表示します。以下のようなコードを追加してください。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FreezStock',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => LoginSignupScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/images/splash.png'),
      ),
    );
  }
}

class LoginSignupScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ログイン/サインアップ')),
      body: Center(child: Text('ログイン/サインアップ画面')),
    );
  }
}

上記のコードでは、スプラッシュ画面を表示して3秒後にログイン/サインアップ画面に遷移します。Image.asset('assets/images/splash.png')を使ってスプラッシュ画面に画像を表示しています。必要に応じて、画像のサイズや表示位置を調整してください。これで、シンプルなスプラッシュ画面の実装が完了しました。アプリの起動時にスプラッシュ画面が表示され、指定した時間が経過すると次の画面に遷移します。

すごい、それっぽいコードが出てきましたね。2つ目に作るログイン画面まで少しできています。

ただ、splash.pngがないので、画像を作ってくれないかと頼んだのですが、難しいみたいでした。

スプラッシュ画面で表示する画像をもらえませんか？残念ながら、具体的な画像ファイルを直接提供することはできませんが、以下のオンラインリソースから無料で利用できる画像を見つけることができます。 Unsplash Pexels Pixabay これらのウェブサイトから、スプラッシュ画面に適した画像を見つけてダウンロードできます。ダウンロードした画像は、プロジェクトのアセットディレクトリ（例：assets/images）に配置し、pubspec.yamlに追加してください。その後、先ほど説明したようにImage.assetウィジェットで画像を表示することができます。また、スプラッシュ画面で表示する画像がブランドロゴなど独自のデザインである場合は、専門のデザイナーやオンラインサービス（例：Fiverrや99designs）を利用して作成することを検討してください。

SVGなら書いてくれるんじゃないかなぁとお願いしてみたのですが、あまりうまくいかず・・・。ただ、SVGファイルをFlutterで表示する方法は教えてくれました。

その後、いろいろ試行錯誤した結果、凝ったものは作ってくれなさそうだったので諦めました・・・。（誰かChatGPTにロゴを作らせる方法を知ってる人がいたら教えてください）

polygynを使って、よりFreezStockにふさわしいSVGを作ってもらえませんか？もちろんです。以下に、<polygon>タグを使用してFreezStockにふさわしい氷の結晶のようなシンプルなSVGアイコンを作成した例を示します。この例では、3つの頂点を持つ簡単な氷の結晶のような三角形を作成しました。points属性には、頂点の座標がスペース区切りで指定されています。必要に応じて、形状や位置を調整してカスタマイズできます。このSVGコードを使用して、スプラッシュ画面に氷の結晶アイコンとテキストのロゴを表示できます。前述のflutter_svgパッケージを利用してSVGアイコンを表示してください。