2020/10/31 MDC-102 Flutter:Material Structure and Layout (Flutter)の訳パート2

 

1. Introduction

マテリアルコンポーネント(MDC)は、開発者がマテリアルデザインを実装するのに役立ちます。 GoogleのエンジニアとUXデザイナーのチームによって作成されたMDCは、美しく機能的なUIコンポーネントを多数備えており、Android、iOS、ウェブ、Flutter.material.io / developで利用できます。


codelab MDC-101では、2つのマテリアルコンポーネントを使用してログインページを作成しました。テキストフィールドとインクの波紋のあるボタンです。 それでは、ナビゲーション、構造、およびデータを追加して、この基盤を拡張してみましょう。


What you’ll build

このコードラボでは、衣料品や家庭用品を販売するeコマースアプリであるShrineというアプリのホーム画面を作成します。

含まれるもの:

トップアプリバー
製品でいっぱいのグリッドリスト



MDC components in this codelab

  • Top app bar
  • Grids
  • Cards

4. Add a top app bar

現在、「Next」ボタンをクリックすると、「I did it!」というホーム画面が表示されます。 それは素晴らしいことです!

しかし、今では、ユーザーは実行するアクションや、アプリ内のどこにいるかについての感覚がありません。 それを助けるために、ナビゲーションを追加する時が来ました。…

2020/10/19 Flutter : Icon widgetの訳

IconウィジェットはUIとしてのグラフィカルなシンボル(つまりアイコン)を表示します。


sample1-1

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