FlutterのNavigationとRoutingを理解する
この記事はFlutter 全部俺 Advent Calendar 10日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 Flutterの画面遷移 FlutterではすべてがWidgetなので画面もまたWidgetで、画面内の他のWidgetと明確な区別はありません。 Route というWidgetが一画面を表していて、 Navigator によって表示する Route を切り替えることによって画面遷移が実現されています。 使い方 内部の実装を詳しく紹介する前に基本的な使い方をみていきましょう。 ほとんどの場合 MaterialApp が持っている Navigator を使って画面遷移します。 N
Build a beautiful clock face UI with Flutter for the Lenovo Smart Clock for a chance to win an iMac Pro, Lenovo Smart…
NTT Tech Conferenceは、NTTグループのエンジニアたちが一堂に会し、NTTグループ内外のエンジニアたちと技術交流を行うためのカンファレンスです。ここで「Flutterアプリ開発スタートアップ with Tips」をテーマに神原氏が登壇。続いて、Flutter入門時のポイントと開発のTipsを紹介します。前回はこちらから。 Flutter入門時に押さえておきたいポイント 神原健一氏（以下、神原）：続いて入門時に押さえたいポイントということで、Flutterアプリのファイル構成、画面の作り方、ビジネスロジックの効率的な実装を紹介していきます。Flutterアプリを作っていくときには、プロジェクトを作ったあとに生成されます。 特に重要なファイルが2つあります。1つがソースコードで、main.dartというファイル。そしてpubspec.yamlというライブラリ、もしくはいろいろ
Riverpod is a reactive caching and data-binding framework that was born as an evolution of the Provider package. According to the official documentation: Riverpod is a complete rewrite of the Provider package to make improvements that would be otherwise impossible. Many people still view it as a "state management" framework. But it is much more than that. In fact, Riverpod 2.0 borrows many valuabl
Flutter news from GDD China: uniting Flutter on web and mobile, and introducing Flutter 1.9
Flutter news from GDD China: uniting Flutter on web and mobile, and introducing Flutter 1.9 Posted by Chris Sells, PM for the Flutter developer experience This week is a big one for Flutter! Today, at Google Developer Days, our flagship conference for Chinese developers, we used the keynote to announce our latest stable release: Flutter 1.9. This release is our biggest update yet with more than 1,
Navigator 2.0 の解説 後編 1
前編では、Navigator 2.0 の基本として、新しい Page API を用いた複数の Route の宣言的な状態管理について解説しました。 Navigator の Page API だけでは、Android の戻るボタンや Web ブラウザーの戻る/進むボタンの対応、Web ブラウザーの history の更新（それによるアドレスバーの URL の更新）といった、OS と協調した処理に対応しません。後編では、それらの処理に対応するために新しく提供された Router API について解説します。その後、Navigator 2.0 のまとめと、今後の課題について言及します。 Router による Routing の全体像 Router は、Android の戻るボタンや Web ブラウザーの戻る/進むボタンからの通知の受信、Web ブラウザーの history の更新（それによるアド
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
Flutter環境構築（Windows） 前編 - インストールまで - シー・エス・エス イノベーションラボ（ブログ）
みなさん、こんにちは。イノベーションLABのハヤシです。 イノベーションLABでは今期から、社内の技術開拓に力を入れています。 その中で挑戦した Flutter の環境構築について記事にしていきます。 今回は前編として、 Flutter の最低限のインストールについて解説します。 後編では、 Android エミュレータの作成とサンプルプロジェクトの作成・実行について解説します。 blog.css-net.co.jp 前提条件 Flutter SDK をインストール 環境変数設定 Android Studio セットアップ Android Studio インストール Android Studio 初期設定 Android Studio に Flutter プラグインインストール Android 設定 cmdline-tools をインストール ライセンスを承認する Visual Studi
株式会社 10XにSoftware Engineerとして入社しました💪 - やる気 ない日記
5月GW明けくらいに株式会社 10XにSoftware Engineerとして入社しました。 働きはじめて１ヶ月くらい経ちましたが、入社エントリーを軽く残しておこうかと思います。 10x.co.jp 10X CE0 矢本さんがやってるZero Topicでも10Xにジョインした理由とか話してるので、興味があればぜひ🙏🏻 open.spotify.com なぜ10Xへ？ 理由をプロダクト（Stailer）と会社（10X）の観点で分けて書きます。 Stailerの衝撃 Stailerがリリースされた頃、まさに実生活で日々の買い物に行くことが結構大変な時期でした。 このissueを解決するソリューションとして、Stailerは良い方向性で取り組んでいると思い興味が湧きました。 私は自らのissueと関連性があることを仕事にしたほうが楽しいー！なタイプなので、「Stailerの開発やってみたい
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Googleのプログラミング言語「Dart」のバージョン2.8がリリースされた。今回のリリースに併せて、iOS、Android、Fuchsia、デスクトップ向けアプリの開発に使用されるGoogleのユーザーインターフェース（UI）フレームワーク「Flutter」のバージョン1.17もリリースされている。 Googleは4月にFlutterとDartのリリースプロセスとチャネルを統一する計画を発表しており、今回の同時リリースはこの計画に従ったものだ。 同社によると、Flutterを使用する開発者は月間で約50万人に上り、Google Playには現在、Flutterを用いて開発されたアプリが5万本あるという。ただし、今回のアップデートから
はじめに NNBDは純粋にDartの機能ですが、そのDartの最近の人気は一重にFlutterの人気によるものです。また、Dart 2.0でAOTコンパイルに最適化した理由のひとつとして、Flutterの存在が大きいでしょう。JITよりもAOTに親和性の高いNNBDもまた、Flutter向けと言うことが出来ます。より多くの人に読んでもらうためにFlutterタグも付けました。 Non-Null By Default (NNBD)とは DartではNull安全のことを通称でNNBDと呼びます。これまではint i;と書くとi = null;が可能でしたが、NNBD導入後はコンパイル時エラーとなります。Null可型にするにはint? i;と書くことになります。?修飾のない既存のintの挙動を変えて非Null可型にするので、By Defaultです。Null安全を知らない方にとっては、これだけで
はじめに 本記事は The Mutability Tax をベースにしています。 意訳・抜粋しまくったので翻訳記事と呼ぶには忍びないですが、記述の足らない箇所があれば元の記事を参照してください。 筆者の David Morgan 氏はGoogleのソフトウェアエンジニアです。 元記事の公開は2019年7月15日です。 本文中に登場するコードは Dart で記述されています。 The Mutability Tax では、MutableとImmutableそれぞれの設計によって生じるコードメンテナンスコストのことを Tax(税金) と形容しています。 本記事では 代償 と表現します。 3点要約 Mutableな型はバグを生みやすいです。 Immutableな型も正しく扱わないとコードが肥大化してバグを生みやすく、遅くなります。 コード生成（freezed）の力を借りて、簡単に安全な型を定義しま
Medium
You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
この記事は、シンプルなアプリを作りながら、Flutter開発の全体像を大枠で学ぶ内容です。 記事の流れは、ステップを踏みながら開発できるように順番に記載した、ハンズオン形式となります。 作るもの if-then planningのルールをスマホで管理できるものです。 if-then planningについての詳しい説明は省きますが、 「もし朝起きたら、コップ一杯の水を飲む」 「もしコンビニの近くに来たら、一旦過ぎてから本当に行きたいか考える」 のような、とある行動をトリガーとして良い行動を行うように、人間をプログラムするものです。 アプリ化の経緯は、今までスプレッドシートなどを使っていましたが、すぐに記録・閲覧できると便利だなと思ったためです。 機能 アプリの機能は下記のとおりです。 最低限アプリとして必要な機能だけを作成してゆきます。 ルールを追加することができる ルールを一覧で見ること
この記事はフューチャー Advent Calendar 2021の11日目の記事目です。 弊社のブログでもFlutter連載が行われているので、興味のある方はご一読ください。 https://future-architect.github.io/articles/20210510a/ はじめに Flutterにおける状態管理の方法は様々なパターンが存在してますが、いい意味で非常に変化が激しく、確固たる状態管理のパターンというのはまだ確立されていません。 Flutterの状態管理に関する記事は調べれば多く出てきますが、1年前の記事ですら古い内容を含んでいる場合が多いので、自らのキャッチアップの意味も込めて、本記事では2021年12月時点での状態管理のパターンを整理したいと思います。 文章や図だけだと状態管理手法の違いについてイメージが湧きづらい方もいると思いますので、この記事ではソースコード
The missing server for Flutter Serverpod is an open-source, scalable app server, written in Dart for the Flutter community. // Creates an endpoint called ‘example’ class ExampleEndpoint extends Endpoint { // Endpoint method to be called from client. Future<String> hello( Session session, String name) async { return ‘Hello $name’; } } // Client that can connect to the pod. var client = Client (‘htt
localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ const Locale('en', ''), // English, no country code const Locale('ja', ''), // Japanese, no country code ], supportedLocalesについては注意点があります。 例えば、中国語には簡体字と繁体字という2種類の漢字が存在します。 更に、北京語・台湾華語・香港語に細分化することが出来るのです。 詳しくは以下の公式ページを確認してください。 https://fl
![[Flutter2も対応]多言語対応についてのまとめ – MUCHILOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/1013a457f455346a75a5057b530f1e89d3e7277b/height=288;version=1;width=512/https%3A%2F%2Fmuchilog.com%2Fwp-content%2Fuploads%2F2020%2F09%2FSimulator-Screen-Shot-iPhone-11-2020-09-12-at-18.29.26-473x1024.png)
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Flutter に新しく実装された Navigator 2.0 の解説を試みます。内容としては、 Learning Flutter’s new navigation and routing system, Navigator 2.0 and Router (PUBLICLY SHARED) - Google Docs, そして Navigator 2.0 に関する 複数の GitHub issue の議論の内容をまとめたものになります。さらに、その議論をもとに AuthGuard などの機能を実装した独自のサンプルコードを添付しています。ただし、ナイーブに実装した段階のものであるため、うまく構造化されておらず、そのままではプロダクションでの使用に耐えません。 解説量が長くなってしまい、また期日を過ぎてしまったので、前後編に分けています。独自のサンプルコードも後編で添付します。 現状 Nav
DartPad
An online Dart editor with support for console and Flutter apps.
DartでgRPCを使う - Qiita
この記事について Dart Advent Calendar 2019 の 13 日目の記事です。 その後も読みやすい記事になるようたびたび改善してます。 対象者 gRPC を知らない人 少し知っているけれど使い方がわからない人 使いどころがわからない人 Dart での使い方を知らない人 目標 Dart で REST 等の Web API の代わりに gRPC を使う基本的な方法を把握する 他の使い方（双方向の通信が必要な用途など）もイメージできるようにする GitHub リポジトリ この記事のコードを GitHub に置いています（英語にして、他にも少しだけ変えています）。 kaboc/dart_grpc_examples gRPC とは Google によって開発されたオープンソースの RPC フレームワークで、今は Cloud Native Computing Foundation（C
Over the last four years, we’ve evolved Dart into a fast, portable, and modern language. Our next release, Dart 3, completes the journey to a fully sound null safe language. As the last step of that journey, we’re removing several historical Dart language and SDK artifacts, including removing support for running without sound null safety. This makes Dart easier to learn, and enables us to evolve t
Flutterで始めるアプリ開発
このページのゴール Providerの概要と使い方を知る Providerを使いユーザー情報を管理する チャットアプリ全体像 機能一覧 ✨ メールアドレス・パスワードでログインできる ✨ ログアウトできる ✨ チャットの投稿一覧を表示できる ✨ チャットに投稿できる ✨ チャットの投稿を削除できる イメージ図 ❗️ 注意事項 ❗️ プロジェクト・雛形の作成が終わっていない場合は Firebaseを使ったアプリ概要のページを確認しましょう。 状態管理 状態管理とは まずは状態管理とは何であるかについて理解していきましょう。 Widgetとはでは、 FlutterはWidgetをツリー状に組み合わせUIを実現することを紹介しましたね。 そして、状態を持ったWidgetでは、 データを元にUIを作る仕組みのことを状態を持つと呼ぶことを紹介しましたね。 Widgetをツリー状に組み合わせUIを実現
【Flutter】そのディレクトリ構成は恋される
そのディレクトリ構成は恋される タイトルのとおりですが、スマホアプリエンジニアの私が個人的に恋している(推している)Flutterのディレクトリ構成を紹介しようと思います。 私の思想としてはクラスの役割とUTのしやすさに設計しております。 Flutterでアプリ開発をする際は基本的にこのディレクトリ構成を使用しております。 ディレクトリ構成は一長一短ありますので、気に入らない方はスルーしてください。 前提 Dart: 2.17.1 Flutter: 3.0.2 アーキテクチャ: MVVM 状態管理: riverpod MVVMについての説明は割愛しますので、詳細が知りたい方は以下をご参照ください。 ディレクトリ構成 ディレクトリ構成を紹介します。 . ├── android ├── ios ├── assets │ ├── images │ └── json ├── coverag
10XはFlutterKaigi 2022にプラチナスポンサーとして協賛します & 10Xから3名登壇します - 10X Product Blog
こんにちは！10X Software Engineerの岡野（@operandoOS）です。 2022年11月16日（水）- 18日（金）に開催されるFlutterKaigi 2022にて、10Xはプラチナスポンサーとして協賛します。 また、10Xからスポンサーセッションで yamakazu (@yamarkz) さん、個人セッションで ひさいち（@hisaichi5518）さん、みやけりょう（@ryo_ryoo_ryooo）さんの3名が登壇しますので、各セッションの紹介をさせていただきます。 flutterkaigi.jp なぜFlutterKaigiをスポンサーするのか 10Xは、「10xを創る」をミッションのもと、スーパーマーケット・ドラッグストアなどのチェーンストアのオンライン事業立ち上げと成長に必要なすべてを備えたプラットフォーム「Stailer（ステイラー）」を提供しています。
Flutterを学ぶのにおすすめの本５選
Flutter開発者におすすめの書籍５選です。iOS/Androidモバイルアプリエンジニア向けにFlutter（Dart言語）を学習するのにおすすめの本を５つ紹介します。初心者だけでなく中級者にも十分で最新の環境構築方法や、Riverpodなどの状態管理についても触れられています。ハンズオン用にサンプルコードが充実してかゆいところへも手が届くよう本もあります。ウィジェットのグラフィックやアニメーション、ゲームやFirebaseを解説したもあります。 ・Flutter実践開発 ── iPhone／Android両対応アプリ開発のテクニック ・Flutter モバイルアプリ開発バイブル ・基礎から学ぶ Flutter ・マルチプラットフォーム対応 最新フレームワーク Flutter 3入門 ・Flutter×Firebaseで始めるモバイルアプリ開発・最新改訂版 ・Flutter×Fireb
This article is an extension of my talk: Layering your Flutter App Architecture from Flutter Festival London. Structuring code is one of the big – if not the most important – challenges when building large-scale applications. The decisions you make regarding architecture will impact how fast you can deliver new features in the future and how well you can maintain the existing functionality with th
Today we’re announcing the stable release of the Dart 2.5 SDK, which includes technical previews of two major new developer features: ML Complete — code completion powered by machine learning (ML) — and the dart:ffi foreign function interface for calling C code directly from Dart. Dart 2.5 also has improved support for constant expressions. This release is another step toward our vision of the bes
こんにちは！ BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのウメバヤシです。 iOSやAndroidのアプリで下タブ（BottomNavigationBarやUITabBar）などを実装することはよくあるかと思います。 その際、アイコンをオリジナルの画像にすることも多いと思いますが、通常は端末ごとに適正サイズの画像ファイルを何サイズか組み込みます。 ただ、Flutterではちょっと違った方法で設定した方がスマートそうだったので、今回はその方法を紹介します。 画像ファイルを設定するだけじゃダメなの？ iOSやAndroidネイティブだと端末の画素密度ごとに適正サイズの画像ファイルを設定すると思いますが、 FlutterではUIもコードで書いて作成していくので、アイコン画像をカスタムするときなども、 コード中に画像の表示サイズを数値で指定してあげないと、いい
A small piece of Dart Dart is a client-optimized language for fast apps on any platform, it make it easy to build the UI of your application and it is quite nice language to work with, it the language used by Flutter Framework, Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Enter Rust Rust is blazingly fast
const allEven = items.every(item => item % 2 == 0);
この記事はJX通信社アドベントカレンダーの19日目です。 sakebookです。最近はServer Side Kotlinをやってますが、Flutterも少し触ってます。 去年はKotlin で CLI のネタを書いたので今年はそれのDart版を書こうと思います。 tech.jxpress.net 全体の流れ Dartとプロジェクトのセットアップ CLIでの動作確認 GitHub Actionsで配布 Dartのインストール Flutterを使っていればbundleでインストールされていますが、standalone版が必要(後述)なのでHomebrewでいれます。 $ brew tap dart-lang/dart $ brew install dart 筆者の環境は次の通りです $ dart --version Dart VM version: 2.7.0 (Fri Dec 6 16:2
Our vision for Flutter is to be a portable UI framework for building beautiful app experiences on any platform. Today, as part of Flutter 2, we’re announcing that Flutter’s web support has hit the stable milestone. The first Flutter release supported iOS and Android, and has been used to bring over 150,000 apps to mobile app stores. Now, adding web support means that those same apps can reach an e
Announcing Dart 2.12
Today we’re announcing Dart 2.12, featuring stable versions of sound null safety and Dart FFI. Null safety is our latest major productivity feature, intended to help you avoid null errors, a class of bugs that are often hard to spot, as detailed in this video introduction. FFI is an interoperability mechanism that lets you invoke existing code written in the C programming language, such as calling
週刊 Dart & Flutter インプット 26
毎週金曜日に、@ntaoo がインプットしたDart & Flutterの情報のリンク集をまとめて共有します。 Canonical enables Linux desktop app support with Flutter | by Chris Sells | Flutter | Jul, 2020 | MediumCanonicalと協業して、Flutter Linux の alpha 版をリリースしたとアナウンス。
Dart の JSON エンコード・デコード処理の Tips 集
そのため例えば、FirestoreのTimestampなどが入ったMap構造は”JSON”ではないです。なので、そういった値を含むものをJSONと呼ぶのはおかしいという声をたまに聞きます。 それはそうですが、Dartの場合は以下が慣例になっているため、厳密な定義に拘らず「JSON構造の Map<String, dynamic> 」をJSONと呼んで済ませる程度の割り切りをするのが良いと思っています。 エンコード: Map<String, dynamic> toJson() => {...}; 形式のメソッド定義デコード: fromJson(Map<String dynamic> json) 名前付きコンストラクタ定義
fromJsonをNamed ConstructorsでもStaticメソッドでもなく、factoryコンストラクタで書く理由 | フューチャー技術ブログ
fromJsonをNamed ConstructorsでもStaticメソッドでもなく、factoryコンストラクタで書く理由 はじめにTIG真野です。Dart/Flutter連載2022の7日目です。 Dartはコンストラクタがたくさんパターンがありますが、公式ドキュメントはもとより、国内外の様々なブログ記事で使い分けが紹介されており、先人による高速道路が整理されていると実感できます。 Language tour | Dart の Constructorの章 Dartのコンストラクタについて | DevelopersIO Dart のコンストラクタの基本 (できることまとめ) | Zenn 一方で、慣れてくると自然だと感じてきますが、Flutterサンプルコードにある fromJson がfactoryコンストラクタであることが、最初はピンと来ませんでした。なぜ、staticメソッドでは
DartPad
An online Dart editor with support for console and Flutter apps.
Dartの基本文法を振り返る - Qiita
Dart DartはGoogleによって開発されたプログラミング言語です。 もともと、JavaScriptを置き換える言語を目指していましたが、Googleがとりあえず諦めてしまったようなので、今はAltJSの選択肢の一つになっています。 なぜ、今Dartなのかというと 最近Dartを使っているFlutterが流行っているから FlutterでWebアプリが作れる FlutterのWindows版が正式版として使える Flutterの他のPC版(macOS, Linux)がbetaで動くようになってきてる 個人的にDartが好きだから Dartの言語仕様 Dartはコンパクトな言語仕様らしく仕様書は目次などを含め150ページほどです。(C++17のドラフトは1500ページ弱あります。) 基本形はJavaで、それにJavaScriptの考え方の一部を取り入れた感じです。 影響を受けた言語(f
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
週刊 Dart / Flutter インプット その１
コーディングとタスクの高速化でより効率的な開発を Flutter開発で押さえておきたいポイントとTips
Flutter Riverpod 2.0: The Ultimate Guide
Flutter 2はWeb向けに本番環境対応しており、新しいプラットフォームを追加している
グーグル、「Dart 2.8」と「Flutter 1.17」をリリース--iOS関連機能を大幅強化
DartのNull安全導入状況 (NNBD) - Qiita
【Flutter, Dart】ミュータブルの代償とイミュータブルの代償、そしてfreezed - Qiita
習慣改善アプリを作りながら学ぶFlutter入門 - Qiita
【2021年版】Flutterの状態管理パターン総まとめ - Qiita
Serverpod – The Flutter Backend
[Flutter2も対応]多言語対応についてのまとめ – MUCHILOG
Dart 2.6がLinux、Windows、MacOSをネイティブサポート
Build software better, together
Flutter の Navigator 2.0 の解説 前編
The road to Dart 3: A fully sound, null safe language
Very good layered architecture in Flutter
Announcing Dart 2.5: Super-charged development
【Flutter】アイコンにオリジナル画像を設定する方法｜TechRacho by BPS株式会社
Dart Meets Rust: a match made in heaven ✨
Dart List チートシート - Flutter入門
DartでCLIツールを作ろう - JX通信社エンジニアブログ
Flutter web support hits the stable milestone