22新卒技術研修で実施したFlutter研修の講義資料です。 動画:https://youtu.be/oQCJZFqDwIo ハンズオン用リポジトリ https://github.com/mixigroup/2022BeginnerTrainingFlutter
対象となる読者 これからFlutterの勉強を始める人 ネットで断片的な情報を拾いながら勉強するのが苦手な人 FlutterというToolkitの根本理解を目指す人 英語が苦手、公式ドキュメントを読むのに挫折した人 対象でない読者 メンター等、周りに勉強の仕方を教えてくれる人がいる人(その人に従うのが一番です) Flutterにはあまり興味ないけどとにかくアプリは作りたい!という考えの人 とにかくアプリ作りたい!アプリの作り方教えて!精神の人 公式ドキュメントの内容やネットの情報を自ら吸収できる人 なぜこの記事を書いたのか Flutter初心者の方が迷子にならないような道しるべが必要だと思ったからです。 僕もFlutterを触り始めて4ヶ月の初心者ですが、まだ4ヶ月しか経っていないからこそ最初に躓いたことや、どういう勉強が役に立ったか記憶が鮮明に残っています。 まだFlutter初心者の目
📕書籍化お知らせ📕 本書が翔泳社様から「動かして学ぶ!Flutter開発入門」として出版されることになりました!! https://www.shoeisha.co.jp/book/detail/9784798177731 書籍化できましたのは、読者の皆様のご高評のおかげです。いつもご利用本当にありがとうございます! 書籍の内容は、2023年4月15日の内容と概ね同じになっています。 ただし、書籍の方は、イラスト/手順の項番/キャプションなどが非常にわかりやすくなっており、プロジェクト形式でのサンプルソースコードも提供されます。 🚨有料化のお知らせ🚨 書籍化に伴う諸般の都合により、出版された部分の削除や非公開などはしないのですが、出版日に有料化をさせて頂く予定です。 今まで2年以上無料で公開をさせて頂いた状況もあり心苦しいのですが、ご理解頂けますと幸いです ⚠️⚠️⚠️翔泳社様の書籍
日本時間の3/4の未明に行われたFlutter EngageでFlutter2.0が発表されました。 変更点をまとめていきます。 Web/Windows/MacOS/LinuxのサポートがStableに 元々モバイル向けのクロスプラットフォームであったFlutterは、ベータ機能としてWeb、 Windows、 MacOS、Linuxをサポートしていましたが、 Flutter2.0でこれらのサポートがStableになりました。 従来の「モバイルフレームワーク」から、「ポータブルフレームワーク」へ変わるぞ!と発表されています。 Flutter for WebではWebassemblyとSkiaを使って直接CanvasにUIを描画するCanvasKitが紹介されました。 これは従来のdomを直接操作する方法と比べてパフォーマンスに優れ、モバイル版との差異も少ないレンダリング方法ですが、 Ski
あわせて読みたい FlutterでBLoCだChangeNotifierと振り回されて消耗するまえに - タオルケット体操 筆者のFlutterに対する印象は半年前にこのエントリーを書いたときから驚くほどに何も変わっていないので、逆にFlutterは非常に明快でわかりやすいライブラリなのかもしれないですね。 hachibeechan.hateblo.jp 筆者の主張の事前まとめ Reactの学習は実質Flutterの予習 クライアントアプリを設計するにあたってはActiveRecordパターンの再発明をしてはいけない 結局MVX RXSteamとはなんだったのか DDDの勉強をすると多くの示唆を得られる Remi wareを信じろ ちなみにここ以下で述べるActiveRecordパターンはPoEEAとRoRのものの混合があるかもしれませんが、利用すべきじゃないという点において同一なので特に
Flutterに出会ってしまったせいで、Flutterを中心に生きていこうと考えている私のポエムでございます。 エンジニアとしての頭打ち感 2016年に35で独立した時はエンジニアとして頭打ちを感じていて、エンジニアとして独立することはあまり考えていなかった。初心者ではないけど、上級者になれないなと感じていた。 エンジニア一本じゃ難しいと考えた時、その隙間を埋める役割はありかなと思った。業務系のシステム導入なら、コンサル〜要件定義の上流工程をやり、開発系なら開発寄りのディレクター。その時々で研修講師。この辺を組み合わせて、今までやってきた。 コードは細々と書いていた。JavaやPython、メンテナンスしてるシステム(WPF)やアプリ(iOS / Android)なり、kintoneでjs書いたりWordPressのプラグイン開発みたいなやつをチラホラやってた。小規模な受託なら受けていた。
Photo by Hush Naidoo Jade Photography on Unsplash「一般的なモバイルアプリ」の設計全般において、特に何に気を付ける必要があるか、あるいは逆にあまり気にしてなくても良いのではと思うことなどを述べていきます。 (…のつもりでしたが、後者含めると1記事に収めるの困難で、最後にさらっと触れつつ別記事で手厚く書きたいところです🤔) ここでの「一般的なモバイルアプリ」は規模観点では以下程度のイメージですが、それを超えるような規模でも通ずる内容も多いと思っています。 コード量: 数万〜十数万行実装者: 一桁人種類としては(スマホ向けの)クライアントアプリコードであり、以下などではないです。 パッケージ・ライブラリではないサーバーサイドではないこの種類によって適切な組み方はけっこう変わり、アプリコードは依存関係の末端側(基本的に依存される側にはならない)な
諸事情によりしばらくFlutterでアプリ作って感じたことをいくつか。 良いところ 1. ちゃんと動く みなさんも今までに出ては消えていくiOS, Android両方で動くアプリ作れるよ系ソリューションで色々なお気持ちを発生させてきたかとおもいますが、Flutterの出来の良さはピカイチ感があります。Flutter Engineすごーい! 大抵のアプリが必要とするような機能(当然全てではない。例えばパスワード管理との連携とかは存在しない)であれば、各プラットフォームネイティブに手を入れることなくちゃんと動く。自前レンダリングと聞いて心配していたパフォーマンスも普通に悪くない。なんて素晴らしいんでしょう。 Flutterの良さはそこに尽きるとおもいます。 2. すぐ動く いろいろな意味で。 まずコンパイルがそこそこ早いです。 そしてSDKが用意していくれているWidgetの種類がかなり豊富で
Dart言語のフレームワーク「Flutter 2」公開。単一コードでiOS/Android/Web/Win/Mac/Linuxのネイティブアプリ実現。WebAssemblyによるレンダリングエンジン搭載 Googleは、Dart言語のフレームワーク「Flutter 2」の公開を発表しました。 Now introducing, Flutter 2 at #FlutterEngage! Learn more about this major upgrade to the portability of Flutter that opens up a broad range of new target platforms like web and desktop from a single code base. Check it outhttps://t.co/T9025C5NCV pic.twi
Share Facebook Twitter LinkedIn Mail Our next generation of Flutter, built for web, mobile, and desktop Today, we’re announcing Flutter 2: a major upgrade to Flutter that enables developers to create beautiful, fast, and portable apps for any platform. With Flutter 2, you can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as we
WebAssemblyにガベージコレクション機能が登場、Chrome 111で試験的実装に。Dartなど高級言語のWebAssembly対応へ前進 WebAssemblyのガベージコレクション機能が、Chrome 111 Devリリースにおいて試験的実装を示すOrigin trialとして実装されることが分かりました。 WebAssemblyのガベージコレクション機能はまだ仕様策定段階ですが、試験的機能として実装が登場することで仕様策定の作業などが進むと同時に、いわゆる高級言語でのWebAssembly対応が広がることも期待されます。 WASM GCはChromeのフィーチャーフラグで有効化 ChromeブラウザにはStable、Beta、Dev、Canaryなど、開発の段階に分かれた複数のリリースチャンネルがあります。 現在リリースされているChrome 111 Devリリースチャンネル
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 非常に多くのプログラミング言語が使用されているため、プロの開発者も開発者を目指している人も、全力で取り組むべき言語を決めるのに苦労している。特に大変なのは、キャリアを方向づける特定の言語を習得、学習するときだ。テクノロジー教育企業のO'Reillyは先ごろ発表したレポートで、開発者の間で大きな関心を集めている言語を紹介した。 O'Reillyはこのレポート「Where Programming, Ops, AI, and the Cloud are Headed in 2021」のために、自社のオンライン学習、出版パートナー、学習モード、ライブのオンライントレーニングコース、バーチャルイベントのデータを分析した。 すべての言語の中で、学び
先日、社内で Flutter のハンズオンを行ったので、その際に使用した資料を公開します。 Flutter とは? Made by Google Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter™️ は Google が作った、単一のコードベースで iOS、 Android、Web のアプリケーションを作成できるツールキットのことです。 アプリケーションの大部分を Dart という言語で記述します。 Flutter Official Document ※Flutter および Flutter のロゴは Google LLC の商標です。 Flutte
Flutter、Linuxデスクトップアプリの開発対応へ、アルファ版を発表。Canonicalと協業で Dart言語製のUIフレームワークである「Flutter」開発チームは、FlutterによるLinuxデスクトップアプリケーションの開発対応のアルファ版を、Ubuntuディストリビューションなどの開発元であるCanonicalと共同で発表しました。 Canonical enables Linux desktop app support with Flutter! Linux devs get Flutter support for their operating system of choice. Install the Flutter SDK via snap. Build and test on Linux using Visual Studio Code or Android St
はじめに Flutter が本格的に流行ってきたので、勉強のため、架空のショッピングアプリの開発を Flutter を用いて開発してみました。 そこで得られた知見をまとめたいと思います。 開発したアプリの概要 開発するアプリとして架空の飲食店または小売店での注文アプリを作成しました。 この手のアプリの中ではマクドナルドのオーダーアプリがかなりよくできていたので、それを参考にして作成しました。 Flutter の勉強が主な目的ですが、相性の良い Firebase の機能も試してみたかったので、店舗情報、商品情報、注文履歴などのデータはアプリ内で固定値で持たずに Firestore に格納するようにしました。 ただし、商品マスタ登録、店舗マスタ登録や商品在庫といった運用の考慮どはしていません。 また、決済機能は実装対象外としました。 最終的な画面数は 10 画面。 実装期間は土日を 2 ヶ月間
Flutterでアプリ開発を始める前に個人的にやっていることをまとめてみる。個々の作業の具体的な手順や方法に関しては分量が膨大になってしまうので触れないが、より詳しく解説してくれている記事やドキュメントへのリンクなんかは載せておこうと思う。複数人で開発する場合は証明書周りなんかはもっと考慮すべきことはあると思うのだけど今回は省く。 環境設定 version 新規アプリならFlutterのversionは2系からでいいと思う。1系で書く理由として一部のパッケージで2系対応してないなどはあるが、主要なパッケージはほぼ全て問題なく対応してるはずなので2系を使えば良い。 null safety null safetyを後から入れる、もしくは移行でnull safety対応するのは結構骨の折れる作業なので最初から有効にしておくべき。上述したようにFlutterの2系を使っていればnull safet
2018年12月、Googleは「Flutter」というモバイルアプリ用のフレームワークをリリースしました。さまざまなモバイルフレームワークがある中で、改めてGoogleがリリースしたFlutterとはどのようなもので、どういった利点や特徴があるのでしょうか。まだ知らないという方や聞いたことはあるがよく分からないという方も多いと思います。今回は、筆者の経験や感想などを踏まえて、Flutterについて紹介していきます。 はじめに Flutterは、「モバイルアプリフレームワーク」という位置付けで紹介されることが多くなっています。「モバイルアプリフレームワーク」とは、「モバイル」つまり、AndroidとiOSを同じソースを共有して、同時に作成することができるもの。もちろん、厳密には100%同じソースとは言い切れない場合もあります。そこで、もう少し広義の意味では同じ言語でiOS/Androidの
「Dart 3」が来年登場。完全Nullセーフな言語となり、Nullセーフティなしの実行はサポート外に アプリケーションフレームワーク「Flutter」で使われているプログラミング言語「Dart」の開発チームは、来年(2023年)半ばにメジャーバージョンアップとなる「Dart 3」のリリースを予定していると発表しました。 The road to Dart 3 Dart 3, expected by mid 2023, will only support sound null safety. Learn more about how Dart's sound safety compares to other languages, and how we're preparing for this major release in the blog by @MiSvTh → https://t.
2021.01.13 スキル Flutter10XスタートアップCTO 最近流行り始めているGoogleのモバイルアプリ用フレームワーク『Flutter』。iOSでもAndroidでも同じアプリがリリースされることが当たり前となる中、一度に両方のコードを開発できる便利さが注目される理由だ。 「一度触ってみたい」とトップエンジニアの間でも話題になっているが、開発言語はDartと呼ばれる、まだそれほど一般的ではない言語。これまでDartを経験したことがない人にとっては、手を出しづらい側面もあるかもしれない。 そんな中、開発言語を「フルDart」に振り切ってしまった会社がある。開発不要でネットスーパーを垂直立ち上げできるサービス『Stailer(ステイラー)』を提供する10Xだ。 自社に開発リソースがなくてもネットスーパーを立ち上げられるプロダクトとしてコロナ禍で注目を集め、イトーヨーカドーをは
After much discussion among the Sass core team, we’ve come to the conclusion that it’s time to officially declare that LibSass and the packages built on top of it, including Node Sass, are deprecated. For several years now, it’s been clear that there’s simply not enough engineering bandwidth behind LibSass to keep it up-to-date with the latest developments in the Sass language (for example, the mo
Dartによる言語統一開発 筆者は現在の仕事でServer Side(以下、サーバーサイド)の開発言語にDartを用いている。このことを友人に話すと「厳つい選択をしているね」「そんなマイナーな言語でよく開発できるな」と言われることがほとんだ。 恐らく日本では弊社(10X, inc.)のみ? 世界に目を向けてもほとんど見聞きしたことがない技術選択だと思う。少なくとも商用利用(事業としてソフトウェア開発の営み)でDart言語をサーバーサイドで100%利用しているというのは、自分の観測範囲内では見たことがない。 既に弊社は世界でも指折りな Dart Company 🎯 と言っても過言ではない。 ↑ Web API リポジトリの言語比率 クライアントアプリもDartをベースにしたFlutterでiOS/Androidの開発を行っているため、日常で記述しているコードの90%がDartになっている。
FlutterのためのDart製サーバフレームワーク「Serverpod 1.0」正式リリース。Dartでサーバからクライアントまで開発可能に FlutterアプリケーションをクライアントとしたバックエンドサーバのためのDart製フレームワーク「Serverpod 1.0」がオープンソースとして正式にリリースされました。 これでFlutterによるクライアント開発だけでなく、サーバでもDartを用いた開発体験を得ることができるようになります。 We are live! Watch the @ServerpodDev 1.0 release keynote on Youtube. Over a year in the making. Finally you can write your #Flutter app #backend in #Dart.https://t.co/c5P1SGqiO
目次 tl;dr アーキテクチャ サービスアーキテクチャ まとめ 「Stailer」は株式会社 10Xが提供する「開発不要でネットスーパーアプリを立ち上げられるシステム」です。バックエンドとそれにつなげるアプリ(iOSとAndroid)を提供しています。 10Xではよりよいチームを目指しエンジニアも含めメンバーを募っています。エンジニアが気になるどのような技術を使っているかに関して今回このブログで紹介しようと思います。少しでもチームに興味を持ってもらえたら採用ページがあるのでぜひぜひこちらからご応募ください。 tl;dr インフラはGCP クライアントはFlutter(Dart)でサーバもDart サービス間通信はgRPC 分析環境はBigQuery/Redash/Digdagの組み合わせ 監視はCloud Monitoring アーキテクチャ Stailerは主なサービスはGCP上に構築
Flutter 2.2正式リリース。Null安全がデフォルトに、Windows、macOS、Linux対応をシングルコードで。Google I/O 2021 Googleは、5月19日未明(日本時間)に開催したオンラインイベント「Google I/O 2021」で、Dart言語向けのアプリケーションフレームワーク「Flutter 2.2」正式リリースを発表しました。 Welcome to Flutter 2.2 Learn more about the latest growth and updates in the Flutter 2.2 release just announced in the #GoogleIO Developer Keynote! Read https://t.co/kcR6nzhxFI pic.twitter.com/EljCc0cvx1 — Flutter (
ジャンプTOON アプリチーム 2024 年新卒の西峰です。 5 月にサービスを開始した「ジャンプTOON」は、Flutter を採用し Android, iOS, iPadOS 向けのアプリを提供しています。 本記事では、ジャンプTOON モバイルアプリのために独自に開発されたマンガビューワについて紹介したいと思います。 マンガビューワとは マンガ作品を閲覧できる機能です。 本アプリでは、快適に縦マンガを閲覧いただけるよう、スクロールや拡大縮小操作に工夫を加えています。また、作品の転載防止のため、画面録画、ミラーリングの禁止機能も存在します。(本記事では解説しません) ビューワを自作した目的 本アプリではビューワ機能を自作していますが、その目的はいくつかあります。まず、柔軟に独自の機能を追加しやすくするためです。連続して話を読んだり、お気に入りやコメント、いいね、拡大縮小といった要件を全
dotenvをインストール flutter_dotenvのパッケージをインストールします。 flutter pub add flutter_dotenv .envファイルを作成 環境変数を管理するためのファイルを作成します。 VAR_NAME ="dummyValue" ファイルをgitで管理しない場合は.gitignoreに追加しておきます。 〜〜〜 .env .envファイルをアセットに追加 Flutterアプリからファイルを読み込めるようにするために、pubspec.yamlのassetsへ.envファイルを追加します。 assets: - .env 環境変数を読み込み .envファイルをFlutterアプリで読み込みます。 import 'package:flutter_dotenv/flutter_dotenv.dart'; Future main() async { await
Rust言語のコアライブラリをDart言語で実装した「Rust Core 1.0」がリリース。Rustの主な型や便利な機能がDartで使えるように Rust Coreの開発チームは、Rust言語のコアライブラリをDart言語で実装した「Rust Core 1.0」をオープンソースとしてリリースしました。 Rust Coreを用いることで、Dart言語にRust言語が持つ一般的な型やさまざまな便利な機能を取り込むことができるようになります。 合わせて、Rust Coreのドキュメント「Rust Core Book」も公開されました。 DartはGoogleが主導してオープンソースで開発されているプログラミング言語です。クロスプラットフォーム対応のモバイルアプリケーション開発に対応したFlutterフレームワークで用いられている言語として知られています。 なぜDart言語でRustのコアライブ
Googleは同社がオープンソースで開発を進めるクロスプラットフォームフレームワークFlutterの、Windowsアプリへのα版対応が完了したと発表した。Windows10単体を考えても、世界で約10億以上のダウンロード数を誇るため、Flutterのさらなる活用が期待されている。 Flutter自体のα版は、2017年のGoogle I/Oで発表された。当初、同フレームワークはAndroid・iOSのクロスプラットフォーム開発用と思われていた。しかしその後、未だα版やβ版であるもののウェブ、MacOS、Linuxへの対応を進めている状況だ。 クロスプラットフォーム開発のフレームワークが登場する以前は、開発者はデスクトップやスマホごとに異なる画面サイズや機能など、個々に考慮し対応しなければならなかった。例えば、スマホではタッチ操作での利用が多くを占めるが、ラップトップからはキーボード・マウ
対象読者 今回からFlutterの基本について説明します。Dart言語について知っている必要はありませんが、他の言語の基本を知っている方を対象に説明します。特に、JavaScriptやTypeScriptもしくは、Javaなど言語を使ってプログラミングしたことがある方であれば、より理解がしやすくなります。 Dartの基本 前回、Flutterのサンプルプログラムで示しましたが、まずはプログラムスタイルをなんとなく感じてもらえればと思い、記述しました。しかし、実際自分でコードを記述する時には、読んでなんとなくわかるだけでは不十分です。ここでDartの文法について詳細にお伝えすることは難しいですが、Flutterを使う上でも必要なDartの基本や文法について紹介します。 main関数 スクリプト言語に慣れていると、ファイルの上から順に実行される形式が普通といった感覚があります。一方、Dartで
10Xが開発・運営する「Stailer」は、1人のエンジニアがクライアント・サーバー等領域を横断して機能を開発しやすい環境をつくるため、フルDart体制をとっています。 本記事では、Androidエンジニアのキャリアから10X入社後にFlutter、Dartを使って開発を行った久田、岡野、二川にこれまでの経験や転職時のイメージ、キャッチアップ方法などついて聞いてみました。(iOS出身エンジニア編はこちら) インタビューした人久田 一輝(@hisaichi5518)Software Engineer 面白法人カヤックでぼくらの甲子園シリーズのリードエンジニアを務める。その後、GMOペパボでハンドメイドマーケットminneのWeb API開発に関わった後にチーフテクニカルリードとしてモバイルアプリケーションの技術基盤の整備や技術選定を担う。 二川 隆浩(@futabooo)Software E
モバイル以外にも対応したローカル DB を使いたかったので、複数のパッケージを調べてみました。 Hive を特に詳しく調べたため、そこだけ情報量が多めです。 2022年12月補足(結論) 記事を書いたときは Isar に注目していましたが、現在は Drift に落ち着きました。 ややこしそうな印象を受けて試さずにいて、しばらく後に再び気になったときに触って良さに気づいたので、もっと早く使えば良かったと思いました。 イチオシです。 高い機能性、型安全 あらゆる場所で使われている SQLite なので非常に堅牢(参考記事) この一点だけを見ても Isar のような個人開発のデータベースは比較にならない SQLite の最新バージョンを利用できる 既に持っている RDB / SQL の知識を活用できる RDB なので高度な操作も自在にできる Flutter Favorite に選ばれている Fl
はじめに 本記事は、Flutterアプリの開発環境である Flutter SDK の仕組みについてまとめた記事です。この記事を読むことで、Flutter SDK がどのような仕組みで動いているのかが何となく分かると思います。 Flutter SDKとは? まず、Flutter SDK とは、https://github.com/flutter/flutter そのものです。Flutter アプリを Android や iOS, Web, Linux 等のターゲット環境向けにビルドしたり、デバッグしたり、実行するための機能を提供する SDK (開発環境) です。 Flutter SDK の全機能は、flutter コマンド ($flutter runなど) で提供されます。コマンドについては、Flutterコマンド一覧まとめにまとめていますので、併せて参照してください。 Flutter SD
こんにちは、AppBrewの新規事業部の開発責任者を務めております吉野です。 LIPSの開発から離れもう一年が経ち、また夏が訪れようとしています。 この一年で猫を飼い始めたことに加えて変わったことといえばFlutterを新しく触り初めたということがあります。 今回はFlutterでAndroid/iOSの各々のネイティブのコードを実行できるMethodChannelの使い方とそれを実際に使用したImagePicker(ローカルの画像選択画面)の作り方について紹介したいと思います。 今回の記事で、「マルチプラットフォームって結局ネイティブの知識が必要でなんでしょ?」という広くある考え(※要出典)から「これだけ書けばあとはFlutterでできるんだ!」となってもらえたら嬉しく思います。 使用したコードはこちらにおいておきます↓ github.com ↓こんなものをMethodChannelとF
Googleは5月10日(日本時間11日)に米カリフォルニア州マウンテンビューで開催中のイベント「Google I/O 2023」で、Dart言語の新バージョンとなる「Dart 3」の正式リリースを発表しました。 Dart 3 is here with three major improvements announced at #GoogleIO: All code now has sound null safety Records and patterns Class modifiers Details → https://t.co/sefTWYTrcs pic.twitter.com/E8MOV28mNI — Dart Language (@dart_lang) May 10, 2023 Dart 3の大きな新機能は3つ。100%Nullセーフティになったこと、Patternsのサポー
はじめに こんにちは!モジュール開発部のyamakazu (@yamarkz) です。 10Xではテストコードの標準化を目指して、テストコード規約 (Test Coding Standards) を整備してきました。この記事では数ある規約の中でも、実際に活用して効果が大きかったものをいくつか取り上げて紹介します。 テストコードの品質に課題を持っている方や、コーディング規約の整備に関心を寄せる方の参考になれれば幸いです。 ChatGPT 要約 ChatGPTに内容の要約をお願いしました。この記事で述べられている内容は以下の通りです。 テストコードに規約を設ける目的は、「テストの資産性を高めることで、プロダクトの発展性と事業の継続可能性を守るため」である。テストコード規約は、ボトムアップで開発組織全体が守る基準を明確にし、良質なテストを書くために設ける。この規約ではGroup, Arrange
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く