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の種類がかなり豊富で
本記事は、このPublicationの中でも特に初学者向けに書かれています。主なターゲット層は以下のような方です。 JavaScript・PHPなどとっつきやすいWeb系の言語は見よう見まねで触ったことがあるがきちんとは理解できてはいない(プログラムを1行も書いたこと無いレベルの場合はFlutterの前にまず何かとても簡単な入門書をまず一冊挟んだ方が良いです)Flutterを触り立て(環境構築は済んでいる)以前、以下の呟きをしましたが、例えばデザイナー本業の方がFlutterも活用できるようになると幅が広がると思い、また公式ドキュメントにもその旨が書かれていました。 とはいえ、元々バリバリコードを書けてしまうようなごく一部のデザイナーを除いて、やはりFlutterを使いこなせるようになるには(UIレイアウト周りに絞ったとしても)けっこう障壁が高いとは思うので、本記事がその補助となれば幸いで
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
Google、「Flutter 1.9」リリース、Webアプリ生成機能を統合。Flutterは単一コードでネイティブアプリとWebアプリを開発できるフレームワークに Googleは今年5月にFlutterからWebアプリケーションを生成できる「Flutter for Web」を発表。テクニカルプレビューとしてきましたが、Flutter 1.9でこの機能を正式にFlutterに統合しました。 参考:Google、「Flutter for Web」発表。FlutterからWebアプリを生成。Flutterはマルチプラットフォーム対応のフレームワークに。Google I/O 2019 FlutterはもともとiOS/Android対応のネイティブアプリケーションを開発するためのUIフレームワークとして、Dart 2とともに2018年3月に登場。2018年12月にバージョン1.0に到達した段階で、
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リリースチャンネル
「Dart 2.5」が登場。GitHubのコードから機械学習させた賢いコード補完をVSCodeなどに提供 Dart 2.5では「ML Complete」と呼ばれる、機械学習を用いてより賢いコード補完をさまざまなコードエディタへ提供する機能がプレビュー版として追加されました。 Dartをはじめとする型付き言語では、コードエディタによる補完機能が働きやすいという利点がありますが、それでもAPIの種類が増えるにつれて、多数表示される補完候補のなかから適切なものを選ぶ手間は増えていきます。 ML Completeはそうした状況を改善するために開発が進められていると説明されています。 ML Completeの学習データにはGitHub上のオープンなDartのコードが用いられ、TensorFlow Liteによってプログラマが開発中のコードに対して適切な補完のための候補が選ばれます。 下記のツイートに
印刷する メールで送る テキスト 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
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
Dartによる言語統一開発 筆者は現在の仕事でServer Side(以下、サーバーサイド)の開発言語にDartを用いている。このことを友人に話すと「厳つい選択をしているね」「そんなマイナーな言語でよく開発できるな」と言われることがほとんだ。 恐らく日本では弊社(10X, inc.)のみ? 世界に目を向けてもほとんど見聞きしたことがない技術選択だと思う。少なくとも商用利用(事業としてソフトウェア開発の営み)でDart言語をサーバーサイドで100%利用しているというのは、自分の観測範囲内では見たことがない。 既に弊社は世界でも指折りな Dart Company 🎯 と言っても過言ではない。 ↑ Web API リポジトリの言語比率 クライアントアプリもDartをベースにしたFlutterでiOS/Androidの開発を行っているため、日常で記述しているコードの90%がDartになっている。
目次 tl;dr アーキテクチャ サービスアーキテクチャ まとめ 「Stailer」は株式会社 10Xが提供する「開発不要でネットスーパーアプリを立ち上げられるシステム」です。バックエンドとそれにつなげるアプリ(iOSとAndroid)を提供しています。 10Xではよりよいチームを目指しエンジニアも含めメンバーを募っています。エンジニアが気になるどのような技術を使っているかに関して今回このブログで紹介しようと思います。少しでもチームに興味を持ってもらえたら採用ページがあるのでぜひぜひこちらからご応募ください。 tl;dr インフラはGCP クライアントはFlutter(Dart)でサーバもDart サービス間通信はgRPC 分析環境はBigQuery/Redash/Digdagの組み合わせ 監視はCloud Monitoring アーキテクチャ Stailerは主なサービスはGCP上に構築
Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュールシステムを簡単に紹介したいと思います。 なお、ここで言うSassの「モジュール」とは、メンバー(変数、関数、ミックスイン)のコレクションを指し、具体的にはSassのソースファイルのことです。 背景 新しいモジュールシステムが開発された背景として、@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり、と
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 (
前々から気になってたFlutter。 Flutter for Webが統合されたっぽいので、そろそろはじめたいなと(´ω`) www.publickey1.jp せっかくなので、 「なにを疑問に思って、なにを参照したか」 をまとめておこうと思ったので、整理してみた(´ω`) 疑問に思ったことを時系列にまとめてます。 注意 初期段階の理解度なので、正しくないこともあります。。 どう理解したかだけを書いていく予定です。 公式ドキュメントとか このあたりをベースに、いろんな記事を調べていく感じ。 Flutter公式ドキュメント: Flutter Documentation - Flutter Flutter公式ドキュメントの日本語訳版: Flutter Guide JP | Flutter Doc JP Dart公式ドキュメントLanguage tour | Dart 公式ドキュメント以外には本
ジャンプTOON アプリチーム 2024 年新卒の西峰です。 5 月にサービスを開始した「ジャンプTOON」は、Flutter を採用し Android, iOS, iPadOS 向けのアプリを提供しています。 本記事では、ジャンプTOON モバイルアプリのために独自に開発されたマンガビューワについて紹介したいと思います。 マンガビューワとは マンガ作品を閲覧できる機能です。 本アプリでは、快適に縦マンガを閲覧いただけるよう、スクロールや拡大縮小操作に工夫を加えています。また、作品の転載防止のため、画面録画、ミラーリングの禁止機能も存在します。(本記事では解説しません) ビューワを自作した目的 本アプリではビューワ機能を自作していますが、その目的はいくつかあります。まず、柔軟に独自の機能を追加しやすくするためです。連続して話を読んだり、お気に入りやコメント、いいね、拡大縮小といった要件を全
「Scrapboxで読書管理がしたい」そんな自分のために、書籍情報を書影付きで簡単にScrapboxに送れるFlutter(Android)アプリを作りました。 モチベーションScrapboxで読書管理をするときに問題になるのが、Scrapboxに書籍ページを作ること。やろうと思えば、Amazonから対象書籍を検索して、Bookmarkletで取り込むことができるが、ちょっと面倒。 面倒だと続かないので、Scrapboxへの取り込みステップを1つ省略するために、書籍バーコードを読み取り、そのままScrapboxへ送ることができるアプリがあればよいと思い、作りました。 機能書籍バーコードを読み取り、書籍情報を取得、書影付きでScrapbox or Twitter へ送付する(手動での直接ISBN入力も可能)データ取得元はopenBDかAmazonから選択(Amazonを利用する場合は、Ama
dotenvをインストール flutter_dotenvのパッケージをインストールします。 flutter pub add flutter_dotenv .envファイルを作成 環境変数を管理するためのファイルを作成します。 .env VAR_NAME ="dummyValue" ファイルをgitで管理しない場合は.gitignoreに追加しておきます。 .gitignore 〜〜〜 .env .envファイルをアセットに追加 Flutterアプリからファイルを読み込めるようにするために、pubspec.yamlのassetsへ.envファイルを追加します。 pubspec.yaml assets: - .env 環境変数を読み込み .envファイルをFlutterアプリで読み込みます。 lib/main.dart import 'package:flutter_dotenv/flutte
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への対応を進めている状況だ。 クロスプラットフォーム開発のフレームワークが登場する以前は、開発者はデスクトップやスマホごとに異なる画面サイズや機能など、個々に考慮し対応しなければならなかった。例えば、スマホではタッチ操作での利用が多くを占めるが、ラップトップからはキーボード・マウ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く