<h2 id="h3bd9209464">方法1</h2><p>Platform.isIOS/Platform.isAndroidを使用して、自身でPlatformを判別して出し分けることができます。</p><pre><code>import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

import 'dart:io';

Widget loading() {
&nbsp; return Center(
&nbsp; &nbsp; child: Platform.isIOS
&nbsp; &nbsp; &nbsp; &nbsp; ? const CupertinoActivityIndicator()
&nbsp; &nbsp; &nbsp; &nbsp; : const CircularProgressIndicator(),
&nbsp; );
}</code></pre><p><br></p><h2 id="h15aae23d70">方法2</h2><p>adaptiveを使用することで、自動的にPlatformを判別して出し分けることができます。</p><pre><code>import 'package:flutter/material.dart';

Widget loading() {
&nbsp; return const Center(
&nbsp; &nbsp; child: CircularProgressIndicator.adaptive(),
&nbsp; );
}</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p>CircularProgressIndicatoradaptiveだけでなく、SliderやSwitch、SwitchListTileなどでもadaptiveを使用することができます。<br>adaptiveが用意されているものを出し分けたい場合は、adaptiveを使用するのが良さそう。</p>

【Flutter】ローディング表示をiOS/Androidで出し分ける

<h2 id="hea7606c3a9">事象</h2><p>iOSのシミュレーターで実行した時に、テスト広告が表示されない。<br><br>ターミナルに下記メッセージが表示されている。</p><pre><code>&lt;Google&gt; To get test ads on this device, set:&nbsp;
Objective-C
&nbsp; &nbsp; &nbsp; &nbsp; GADMobileAds.sharedInstance.requestConfiguration.testDeviceIdentifiers = @[ kGADSimulatorID ];
Swift
&nbsp; &nbsp; &nbsp; &nbsp; GADMobileAds.sharedInstance().requestConfiguration.testDeviceIdentifiers = [ kGADSimulatorID ]</code></pre><p><br></p><h2 id="hd970156c24">対応</h2><p>Issuesを眺めているとAppDelegate.swiftに追記をする方法が書いてあった。<br><a href="https://github.com/googleads/googleads-mobile-flutter/issues/503" target="_blank" rel="noopener noreferrer">https://github.com/googleads/googleads-mobile-flutter/issues/503</a><br><br>ios/Runner/AppDelegate.swiftを修正する。</p><pre><code>import UIKit
import Flutter
import GoogleMobileAds // この行を追加

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -&gt; Bool {
    GeneratedPluginRegistrant.register(with: self)
    GADMobileAds.sharedInstance().requestConfiguration.testDeviceIdentifiers = [ kGADSimulatorID ] // この行を追加
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}</code></pre><p><br>flutter runするとテスト広告が表示される。</p>

【google_mobile_ads】テスト広告が表示されない場合の解決法

<p>環境</p><pre><code>Flutter 2.10.0
Dart 2.16.0</code></pre><p><br>pubspec.yaml</p><pre><code>dependencies:
&nbsp; flutter_launcher_icons: ^0.9.2</code></pre><p><br>flutter_launcher_iconsをインストールし、</p><pre><code>flutter pub run flutter_launcher_icons:main</code></pre><p>を実行すると<br></p><pre><code>✓ Successfully generated launcher icons
Unhandled exception:
FormatException: Invalid number (at character 1)</code></pre><p>上記のエラーが発生した。<br><br><a href="https://github.com/fluttercommunity/flutter_launcher_icons/issues/316" target="_blank" rel="noopener noreferrer">https://github.com/fluttercommunity/flutter</a><a href="https://github.com/fluttercommunity/flutter_launcher_icons/issues/316" target="_blank" rel="noopener noreferrer"><em>launcher</em></a><a href="https://github.com/fluttercommunity/flutter_launcher_icons/issues/316" target="_blank" rel="noopener noreferrer">icons/issues/316</a><br>上記リンクを参考に、pubspec.yamlを修正し、</p><pre><code>flutter_launcher_icons:
&nbsp; git:
&nbsp; &nbsp; url: https://github.com/Davenchy/flutter_launcher_icons.git
&nbsp; &nbsp; ref: fixMinSdkParseFlutter2.8</code></pre><p>再度実行するとエラーなくアイコンを生成することができる。</p>

【flutter_launcher_icons】エラー(FormatException: Invalid number (at character 1))の対処方法

<p>IconButtonのタップ時やロングプレス時に表示されるエフェクトを消してみました。</p><pre><code>IconButton(
　　onPressed: () {},
　　icon: const Icon(Icons.add),
  highlightColor: const Color(0x00FFFFFF),
  splashColor: const Color(0x00FFFFFF),
)</code></pre><p>highlightColorとsplashColorに透明な色を設定しています。<br><br>全てのWidgetに適応する場合は、themeに設定します。</p><pre><code>MaterialApp(
  title: 'Title',
  theme: ThemeData(
    highlightColor: const Color(0x00FFFFFF),
    splashColor: const Color(0x00FFFFFF),
  ),
  home: const HomePage(),
);</code></pre>

【Flutter】ボタンを押した時のエフェクトを消したい

<pre><code>import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';


class MyWidget extends StatelessWidget {
&nbsp; const MyWidget({Key? key}) : super(key: key);
&nbsp;&nbsp;
&nbsp; @override
&nbsp; Widget build(BuildContext context) {
&nbsp; &nbsp; const _url = "https://flutter.dev";
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; return Column(
&nbsp; &nbsp; &nbsp; children: [
&nbsp; &nbsp; &nbsp; &nbsp; TextButton(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: const Text('アプリ内ブラウザで開く'),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPressed: () async {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await launch(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _url,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceSafariVC: true, // iOS用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceWebView: true, // Android用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; &nbsp; TextButton(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: const Text('外部ブラウザで開く'),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPressed: () async {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await launch(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _url,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceSafariVC: false, // iOS用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceWebView: false, // Android用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; &nbsp; TextButton(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: const Text('ユニバーサルリンクで開く'),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPressed: () async {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await launch(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _url,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceSafariVC: false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; universalLinksOnly: true, // iOSかつforceSafariVCがfalseの場合でのみ有効
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; );
&nbsp; }
}</code></pre>

【Flutter】url_launcherでURLを開く方法を指定する

<p>NG</p><pre><code>id := "hogehoge"
db.Find(&amp;user, id)</code></pre><p><br>OK</p><pre><code>id := "hogehoge"
db.Find(&amp;user, "id = ?", id)</code></pre><p><br>ドキュメント<br><a href="https://gorm.io/ja_JP/docs/query.html#Retrieving-objects-with-primary-key" target="_blank" rel="noopener noreferrer">https://gorm.io/ja_JP/docs/query.html#Retrieving-objects-with-primary-key</a></p>

【Gorm】主キーがstringの時のFind

<p>Next.js 11がリリースされていたので、10からアップグレードしてみます。<br></p><h2 id="hed900658dc">環境</h2><pre><code>"next": "^10.0.0",
"react": "17.0.1",
"react-dom": "17.0.1",</code></pre><p><br></p><h2 id="h046876a126">手順</h2><p>公式の<a href="https://nextjs.org/docs/upgrading" target="_blank" rel="noopener noreferrer">アップグレードガイド</a>の通りに行ってみます。<br></p><h3 id="ha31c15f535">reactとreact-domのアップグレード</h3><p>まずはreactとreact-domをアップグレードします。<br><br>npmの場合</p><pre><code>npm install react@latest react-dom@latest</code></pre><p>yarnの場合</p><pre><code>yarn add react@latest react-dom@latest</code></pre><p><br></p><h3 id="he54ab14daa">nextのアップグレード</h3><p>次に、nextをアップグレードします。<br><br>npmの場合</p><pre><code>npm install next@latest</code></pre><p>yarnの場合</p><pre><code>yarn add next@latest</code></pre><p><br></p><h3 id="h00da90d3f5">package.jsonを確認</h3><p>package.jsonを開いて、バージョンが変更されていることが確認できれば完了です。</p><pre><code>"next": "^11.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",</code></pre>

Next.jsを10から11にアップグレードする

<p>特定の条件下でのみWidgetを表示させたり、条件によってWidgetを出しわけたいことがあると思います。<br><br>そのような時は「...」ドット(ピリオド)3つを使用して、Widgetの配列にWidgetを動的に追加して対応することができます。<br></p><h3 id="h42b5c846a9">コード例</h3><pre><code>import 'package:flutter/material.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
&nbsp;@override
&nbsp;Widget build(BuildContext context) {
&nbsp;&nbsp;return MaterialApp(
&nbsp;&nbsp;&nbsp;home: Scaffold(
&nbsp;&nbsp;&nbsp;&nbsp;appBar: AppBar(title: Text("Flutter")),
&nbsp;&nbsp;&nbsp;&nbsp;body: AppendWidgetList(),
&nbsp;&nbsp;&nbsp;),
&nbsp;&nbsp;);
&nbsp;}
}

class AppendWidgetList extends StatelessWidget {
&nbsp;@override
&nbsp;Widget build(BuildContext context) {
&nbsp;&nbsp;return Center(
&nbsp;&nbsp;&nbsp;&nbsp;child: Row(
&nbsp;&nbsp;&nbsp;mainAxisAlignment: MainAxisAlignment.spaceAround,
&nbsp;&nbsp;&nbsp;children: [
&nbsp;&nbsp;&nbsp;&nbsp;Text("Platform is"),
&nbsp;&nbsp;&nbsp;&nbsp;if (Platform.isIOS) ...{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text("iOS"),
&nbsp;&nbsp;&nbsp;&nbsp;} else if (Platform.isAndroid) ...{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text("Android"),
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;));
&nbsp;}
}</code></pre><p><br>例として、プラットフォームによってテキストを出し分けてみました。<br>iOS端末で見た場合は「iOS」が、Android端末で見た場合は「Android」が表示されます。</p>

【Flutter】「...」を使用してWidgetListにWidgetを動的に追加する

<p>FlutterでMarkdownのテキストを表示する為には、<a href="https://pub.dev/packages/flutter_markdown" target="_blank" rel="noopener noreferrer">flutter_markdown</a>を利用します。<br><br>pubspec.yaml</p><pre><code>dependencies:
  flutter_markdown: ^0.6.2</code></pre><p><br>main.dart</p><pre><code>import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

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

class MyApp extends StatelessWidget {
&nbsp; @override
&nbsp; Widget build(BuildContext context) {
&nbsp; &nbsp; return MaterialApp(
&nbsp; &nbsp; &nbsp; home: Scaffold(
&nbsp; &nbsp; &nbsp; &nbsp; appBar: AppBar(title: Text("MarkdownDemo")),
&nbsp; &nbsp; &nbsp; &nbsp; body: Markdown(data: markdownText),
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; );
&nbsp; }
}

final String markdownText = '''
# 見出し1
hoge

## 見出し2
fuga

### 見出し3
piyo 
'''</code></pre>

FlutterでMarkdownのテキストを表示する

<p>日本でのFlutterの採用事例をまとめました。<br></p><h3 id="hd00eb6082b">REQU</h3><p><span style="color:#333333">サイバーエージェント</span><br><a href="https://www.cyberagent.co.jp/way/features/list/detail/id=26230" target="_blank" rel="noopener noreferrer">https://www.cyberagent.co.jp/way/features/list/detail/id=26230</a><br></p><h3 id="h4fc2f0bbc2">Green</h3><p>アトラエ<br><a href="https://atraetech.hatenablog.com/entry/20210218_green_mobile_app_structure" target="_blank" rel="noopener noreferrer">https://atraetech.hatenablog.com/entry/20210218</a><a href="https://atraetech.hatenablog.com/entry/20210218_green_mobile_app_structure" target="_blank" rel="noopener noreferrer"><em>green</em></a><a href="https://atraetech.hatenablog.com/entry/20210218_green_mobile_app_structure" target="_blank" rel="noopener noreferrer">mobile_app_structure</a><br></p><h3 id="h72c563f63b">カウル</h3><p>ハウスマート<br><a href="https://note.com/yamarkz/n/nd9716541d8ad" target="_blank" rel="noopener noreferrer">https://note.com/yamarkz/n/nd9716541d8ad</a><br></p><h3 id="ha750097178">giftee</h3><p>ギフティ<br><a href="https://blog.giftee.dev/2021-01-12-rebuild-app-with-flutter/" target="_blank" rel="noopener noreferrer">https://blog.giftee.dev/2021-01-12-rebuild-app-with-flutter/</a><br></p><h3 id="hb1c05da024">Stailer</h3><p>10X<br><a href="https://type.jp/et/feature/15075/" target="_blank" rel="noopener noreferrer">https://type.jp/et/feature/15075/</a><br></p><h3 id="hf38638a8d2">SUZURI</h3><p>GMOペパボ<br><a href="https://speakerdeck.com/osamtimizer/suzuri-meets-flutter" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/osamtimizer/suzuri-meets-flutter</a><br></p><h3 id="hed770b3dc7">じゃらん</h3><p>リクルート<br><a href="https://speakerdeck.com/rtechkouhou/flutteryi-xing-falseku-lao-to-cheng-riyue-etaxian-nide-raretamofalse" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/rtechkouhou/flutteryi-xing-falseku-lao-to-cheng-riyue-etaxian-nide-raretamofalse</a><br></p><h3 id="hb847e37937">Chompy</h3><p><span style="color:#0c2340">シン</span><br><a href="https://speakerdeck.com/yagitatsu/chompytefluttercai-yong-sita-zhen-rifan-ri" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/yagitatsu/chompytefluttercai-yong-sita-zhen-rifan-ri</a><br></p><h3 id="h8489b790d6"><span style="color:#141e30">ポルト</span></h3><p><span style="color:#141e30">スタディプラス</span><br><a href="https://tech.studyplus.co.jp/entry/2019/09/27/113643" target="_blank" rel="noopener noreferrer">https://tech.studyplus.co.jp/entry/2019/09/27/113643</a></p>

Articles