FlutterFlow AI Genでフリマっぽいヤフオクアプリ作ってみた

FlutterFlowとは

FlutterFlowは、Flutterアプリの開発を助けるビジュアルな開発ツールです。ドラッグアンドドロップのインターフェースを使ってFlutterのUIをデザインし、アプリストアに提出可能な形でコード一式をエクスポートできます。

FlutterFlowAIGenはページやコンポーネントの生成機能、データベースのスキーマ定義やテーマカラーなどをAIで生成する機能です。現在アルファ版として提供されています。

紹介動画

フリマ風アプリを作ってみる

https://flutterflow.io/ai-gen を開き下記のプロンプトを入力します。まずは商品詳細画面から作っていきます。

💡

iPhoneと入力しているのは商品を具体的に指定してモックをわかりやすくするためです。

生成された商品詳細画面

商品詳細ページが生成されました。なぜかメモアプリのアイコンが表示されています。商品名と商品詳細、開始価格と終了日が表示されています。入札ボタンもあります。

生成されたコード


import '/flutter_flow/flutter_flow_icon_button.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/flutter_flow/flutter_flow_widgets.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

import 'item_detail_model.dart';
export 'item_detail_model.dart';

class ItemDetailWidget extends StatefulWidget {
  const ItemDetailWidget({Key? key}) : super(key: key);

  @override
  _ItemDetailWidgetState createState() => _ItemDetailWidgetState();
}

class _ItemDetailWidgetState extends State<ItemDetailWidget> {
  late ItemDetailModel _model;

  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    _model = createModel(context, () => ItemDetailModel());
  }

  @override
  void dispose() {
    _model.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).requestFocus(_model.unfocusNode),
      child: Scaffold(
        key: scaffoldKey,
        backgroundColor: FlutterFlowTheme.of(context).secondaryBackground,
        appBar: AppBar(
          backgroundColor: FlutterFlowTheme.of(context).secondaryBackground,
          automaticallyImplyLeading: false,
          leading: FlutterFlowIconButton(
            borderRadius: 30,
            buttonSize: 60,
            icon: Icon(
              Icons.arrow_back_rounded,
              color: FlutterFlowTheme.of(context).secondaryText,
              size: 30,
            ),
            onPressed: () async {
              context.safePop();
            },
          ),
          actions: [],
          centerTitle: false,
          elevation: 0,
        ),
        body: SafeArea(
          top: true,
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Stack(
                  children: [
                    Image.network(
                      'https://images.unsplash.com/photo-1600783245891-f275a1575d93?w=1280&h=720',
                      width: double.infinity,
                      height: 400,
                      fit: BoxFit.cover,
                    ),
                    Align(
                      alignment: AlignmentDirectional(-1, -1),
                      child: Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(16, 60, 0, 0),
                        child: FlutterFlowIconButton(
                          borderRadius: 30,
                          buttonSize: 50,
                          fillColor:
                              FlutterFlowTheme.of(context).primaryBackground,
                          icon: Icon(
                            Icons.chevron_left_rounded,
                            color: FlutterFlowTheme.of(context).primaryText,
                            size: 32,
                          ),
                          onPressed: () {
                            print('IconButton pressed ...');
                          },
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsetsDirectional.fromSTEB(16, 16, 16, 0),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(0, 0, 16, 0),
                        child: Text(
                          'Apple iPhone 12 Pro',
                          style: FlutterFlowTheme.of(context)
                              .headlineMedium
                              .override(
                                fontFamily: 'Outfit',
                                color: FlutterFlowTheme.of(context).primaryText,
                              ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(0, 0, 16, 0),
                        child: Text(
                          'A14 Bionic chip, 5G capable, 6.1-inch Super Retina XDR display',
                          style: FlutterFlowTheme.of(context)
                              .bodyMedium
                              .override(
                                fontFamily: 'Readex Pro',
                                color:
                                    FlutterFlowTheme.of(context).secondaryText,
                              ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(0, 0, 16, 0),
                        child: Text(
                          'Starting bid: \$999',
                          style:
                              FlutterFlowTheme.of(context).labelMedium.override(
                                    fontFamily: 'Readex Pro',
                                    color: FlutterFlowTheme.of(context).primary,
                                  ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(0, 0, 16, 0),
                        child: Text(
                          'Ends in 3 days',
                          style:
                              FlutterFlowTheme.of(context).labelMedium.override(
                                    fontFamily: 'Readex Pro',
                                    color: FlutterFlowTheme.of(context).primary,
                                  ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(0, 24, 0, 0),
                        child: FFButtonWidget(
                          onPressed: () async {
                            context.pushNamed('Submit');
                          },
                          text: 'Place Bid',
                          options: FFButtonOptions(
                            width: double.infinity,
                            height: 55,
                            padding: EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
                            iconPadding:
                                EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
                            color: FlutterFlowTheme.of(context).primary,
                            textStyle: FlutterFlowTheme.of(context)
                                .titleMedium
                                .override(
                                  fontFamily: 'Readex Pro',
                                  color: Colors.white,
                                ),
                            elevation: 2,
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0),
                        child: Text(
                          'Product Details',
                          style: FlutterFlowTheme.of(context)
                              .headlineMedium
                              .override(
                                fontFamily: 'Outfit',
                                color: FlutterFlowTheme.of(context).primaryText,
                              ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0),
                        child: Text(
                          'This iPhone 12 Pro features a stunning 6.1-inch Super Retina XDR display, A14 Bionic chip for blazing-fast performance, and 5G capability for lightning-fast download speeds. It also comes with a high-quality triple-camera system for capturing amazing photos and videos. Don\'t miss out on this incredible device!',
                          style: FlutterFlowTheme.of(context)
                              .bodyMedium
                              .override(
                                fontFamily: 'Readex Pro',
                                color:
                                    FlutterFlowTheme.of(context).secondaryText,
                              ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

このコードにはいくつかの良い点と悪い点があります。以下にその指摘を記載します。

良い点：

整理と構造: コードはクリーンで、クラスと関数の命名が明確です。これにより、他の開発者がコードを追いやすくなります。

状態管理: StatefulWidget とその関連する State クラスを使用して、状態を管理しています。適切な場所で dispose メソッドを使用してリソースのクリーンアップも行っています。

コードの再利用: FlutterFlowTheme を使用して、テーマに従ったスタイリングを容易に適用しています。

悪い点：

ハードコードされた値: 画像URLやデバイスの情報（iPhone 12 Proの詳細など）はハードコードされています。これらの値は通常、外部データソースやアプリケーションの設定から取得すべきです。

冗長なスタイリング: Padding ウィジェットが多用されており、それぞれのテキストウィジェットのスタイリングが繰り返されています。これらの共通のスタイルは変数や関数に切り出して再利用することが推奨されます。

静的な onPressed: FlutterFlowIconButton の onPressed で print ステートメントのみが実行されています。これは開発中のデバッグ用かもしれませんが、最終的には具体的なアクションに置き換えるべきです。

不要なインポート: google_fonts や provider など、コード内で使用されていないライブラリをインポートしています。これらの不要なインポートは削除すべきです。

入札画面を作る

入札画面・取引完了画面を作ります（片方プロンプトを忘れました）


Please create a page for bidders to put in their desired bid price for the auction and the maximum price they are willing to pay.

商品一覧を作る

他の商品も探せるように商品一覧画面を作ります。（タイル状に並べたかったのですがうまくいきませんでした）


Create a page to list your Mac with a suggested bidding price for an auction dedicated to Apple products.

出品画面


Create a product detail page for the iPhone you are exhibiting.

トップ画面

フッターのナビゲーションが生成されないため、トップ画面を作成します。


Create the top screen of the auction application. The following links are placed with icons: Sell an item, List of currently listed items, List of items you are selling, Your purchase history, Wish list, and Links to users you are following.