Flutterラボの

プレミアム会員になる

【Flutter】アプリ情報を表示して公式っぽくする 〜AboutDialogについて〜

2020.11.22

はじめに

既存のサービス上でよくある、そのアプリのライブラリ依存環境など細かく説明しているものってありますよね。AboutDialogを使用すれば、簡単にアプリのライブラリ情報を一覧で表示することができます。

完成イメージ

画像1

公式資料

時としてアプリには規約、バージョン番号、ライセンス、その他注意事項を記載する必要があります。実際、こうした形式が整っていないとアプリを公開できないストアもあります。これほどアプリに重要な部分の作成は、もちろん最後まで残しておくべきではありません。皆さんは先に作成を済ませるでしょうが、万一の場合に備えて最適なウィジェットをご紹介します!

DartPadでテストしてみる

Flutter公式Youtubeアカウントが紹介しているWidgetの多くはDartPadからテストコードを閲覧することができます。下記のリンクから参照して見てください。

DartPad dartpad.dartlang.org

全コード

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);
 final String title;

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

class _MyHomePageState extends State<MyHomePage> {

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: FlatButton(
         child: Padding(
           padding: const EdgeInsets.all(8.0),
           child: Text('詳細を表示'),
         ),
         color: Colors.grey,
         onPressed: () {
           showAboutDialog(
             context: context,
             applicationVersion: '1.0.0',
             applicationIcon: MyAppIcon(),
             applicationLegalese:
                 'This application has been approved for all audiences.',
             children: [
               Padding(
                 padding: const EdgeInsets.only(top: 20),
                 child: Text('ここにアプリの説明、概要などを表示させます。'),
               ),
             ],
           );
         },
       ),
     ),
   );
 }
}

class MyAppIcon extends StatelessWidget {
 static const double size = 32;

 @override
 Widget build(BuildContext context) {
   return Center(
     child: Padding(
       padding: const EdgeInsets.symmetric(vertical: 8.0),
       child: SizedBox(
         width: size,
         height: size,
         child: FlutterLogo(),
       ),
     ),
   );
 }
}


まとめ

AboutDialogを使用すれば、簡単にアプリのライブラリ情報を一覧で表示することができます。開発者向けの機能かと思いますが参考になればいいねください。




Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt