2022/10/8/Flutter/Equality in Dart/related sample code

 

訳は文字起こしにあります。


Part1

//https://www.youtube.com/watch?v=DCKaFaU4jdk&t=30s
//Equality in Dart | Decoding Flutter
//パート1:

void main() {
  final a1 = A(title: 'a');
  final a2 = A(title: 'a');
  //デフォルトだと同一インスタンス以外は「等しくない」と評価される。
  //By default, instances other than the same instance are evaluated as "not equal".
  print(a1 == 

2021/3/12 Flutter : Staggered animationsのまとめ

Staggered animations

What you’ll learn

  • 千鳥アニメーションは、連続したアニメーションまたは重なり合うアニメーションで構成されます。

  • 千鳥アニメーションを作成するには、複数のAnimationオブジェクトを使用します。

  • 1つのAnimationControllerすべてのAnimationを制御します

  • Each Animation object specifies the animation during an Interval.工事中🏗

  • アニメーション化したいプロパティに対して、Tweenをつくります。

Terminology:Tweenについて知らない場合、Animations in Flutter tutorialをご覧ください。

 

 

 

 

参考

Staggered animations

2020/10/31 Flutter : MDC-101 Flutter:Material Componentsの訳

注)以下の記事は2020年10月31日時点のコードラボの内容に従って記述していますが、

↓raised_button.dartより抜粋

###このクラス(RaisedButtonクラス)は廃止されました。代わりに[ElevatedButton]を使用してください。
FlatButton、RaisedButton、およびOutlineButtonは、それぞれTextButton、ElevatedButton、およびOutlinedButtonに置き換えられました。
ButtonThemeは、TextButtonTheme、ElevatedButtonTheme、およびOutlinedButtonThemeに置き換えられました。

元のクラス(FlatButton、RaisedButton、およびOutlineButton)は間もなく非推奨になります。それらを使用するコードを移行してください。
新しいボタンとボタンテーマクラスの詳細な移行ガイドがあります
[flutter.dev/go/material-button-migration-guide](https://flutter.dev/go/material-button-migration-guide)。

「廃止されました」と書いてますが、2020年10月31日時点では動いています。

これからはTextButton、ElevatedButton、およびOutlinedButtonを

使いましょう。


1. Introduction

導入

Flutterのマテリアルデザインとマテリアルコンポーネントとは何ですか?

マテリアルデザインは、大胆で美しいデジタル製品を構築するためのシステムです。 一貫した一連の原則とコンポーネントの下でスタイル、ブランディング、インタラクション、モーションを統合することにより、製品チームは最大のデザインの可能性を実現できます。

Flutterのマテリアルコンポーネント(MDC-Flutter)は、アプリやプラットフォーム全体で一貫したユーザーエクスペリエンスを作成するコンポーネントのライブラリと、設計とエンジニアリングを統合します。

マテリアルデザインシステムが進化するにつれて、これらのコンポーネントは、Googleのフロントエンド開発標準に準拠して、一貫したピクセルパーフェクトな実装を保証するように更新されます。 MDCは、Android、iOS、およびWebでも使用できます。

このコードラボでは、MDCFlutterのいくつかのコンポーネントを使用してログインページを作成します。


作るもの

このコードラボは、衣料品や家庭用品を販売するeコマースアプリであるShrineというアプリの作成をガイドする4つのコードラボの最初のものです。 MDC-Flutterを使用して、ブランドやスタイルを反映するようにコンポーネントをカスタマイズする方法を示します。

このコードラボでは、以下を含むShrineのログインページを作成します。

  • 神社のロゴの画像
  • アプリの名前(神社)
  • 2つのテキストフィールド。1つはユーザー名の入力用、もう1つはパスワード用です。
  • 2つのボタン

android


このコードラボで登場するMDCコンポーネント

  • Text field
  • Button
  • Ripple (it is a visual form

2020/10/28 Using packagesの訳

 

工事中🏗

 


Developing new packages

特定のユースケースに対応するパッケージが存在しない場合は、カスタムパッケージを作成できます。


Package versions

すべてのパッケージには、パッケージのpubspec.yamlファイルで指定されたバージョン番号があります。 パッケージの現在のバージョンがそのパッケージ名の横に表示され(たとえば、url_launcherパッケージを参照)、以前のすべてのバージョンのリスト(url_launcherバージョンを参照)も表示されます。

例えば、pubspec.yamlファイル下記のフォーム(省略形)で記述すると、

plugin1:

これは、「plugin1パッケージの任意のバージョンを使用できる」ことを意味します。 パッケージの更新時にアプリが破損しないようにするには、次のいずれかの形式を使用してバージョン範囲を指定します。

●範囲の制約:最古バージョンと最新バージョンを指定します。 例えば:

dependencies:
  url_launcher: '>=5.4.0 <6.0.0'

キャレット( ^ )構文の範囲制約は、通常の範囲制約に似ています。

dependencies:
  collection: '^5.4.0'

詳しい情報は, package versioning guide.をご覧ください。


Updating package

2020/10/26 Firebase : Cloud Firestore/Usageの訳パート2

 

<<パート1へ

Querying

Cloud Firestoreは、コレクションをクエリするための高度な機能を提供します。 クエリは、1回限りの読み取りまたは変更のサブスクライブの両方で機能します。


Filtering

コレクション内のドキュメントをフィルタリングするには、whereメソッドをコレクション参照にチェーンできます。 フィルタリングは、同等性チェックと「in」クエリをサポートします。 たとえば、年齢が20歳を超えるフィルターユーザーの場合:

FirebaseFirestore.instance
  .collection('users')
  .where('age', isGreaterThan: 20)
  .get()
  .then(...);

 

firestoreデータベースbcffの状況↓

(‘users’コレクションに4つのドキュメントがあります。)

//main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/button_builder.dart';

import './register_page.dart';
import './signin_page.dart';

import 'package:cloud_firestore/cloud_firestore.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  

2020/10/21 Flutter : Understanding constraintsの訳パート2(Example3〜10)

⇦前ページ

サンプルコードは↓にあります。

this GitHub repo

Example 3

Example 3 layout

Center(
   child: Container(width: 100, height: 100, color: Colors.red)
)

 

スクリーンがCenterウィジェットに対して、スクリーンと同じサイズであることを強制します。ですからCenterウィジェットはスクリーンと同じサイズを占有します。

CenterウィジェットがContainerウィジェットに対して、「あなたは自分の望むサイズでいいです。しかしスクリーンを超えるサイズにはなれません」と言います。その結果Containerのサイズは100✖️100になります。


Example 4

Example 4 layout

Align(
   alignment: Alignment.bottomRight,
   child: Container(width:

2020/10/19 Flutter : SizedBox widgetの訳

SizedBoxがウィジェットをラップするとき、heightプロパティとwidthプロパティを使用してウィジェットのサイズを変更します。

ウィジェットをラップしない場合は、heightプロパティとwidthプロパティを使用して空のスペースを作成します。


sample1-1(まず、ただのContainerウィジェットを表示)

//sample1-1
//main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget