<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>

【採用・導入事例】Flutterで作られたアプリ

<html><head></head><body><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></body></html>

<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>