Dart

FlutterのListViewについて学習する

本日はFlutterのListViewについて学習します。 ListViewとは 少し前に複数ウィジェットを配置するための縦に並べるColumnと横に並べるRowについて学習しました。 ListViewはこのColumnに似ています。 どちらかというとAndroidの知識があるとAndroidにすでにL…

FlutterのGridViewレイアウトを学習する

本日はFlutter のGridViewについて学習します。 前回は複数のウィジェットを乗せるためのウィジェットColumnとRowについて学びました。ColumnはiOSでいえばUITableView、AndroidではRecyclerViewと同じような役割を持っていました。 本日のGridViewはどちら…

Z軸にウィジェットを並べるStack

今日はStack について学習します。 Stackレイアウトについて Stack は縦でも横でもなくウィジェットを重ねるためのレイアウトです。 基本的なイメージは前回のColumnやRowと同じ機能で複数のウィジェットを配置するために用いられます。 つまり、ColumnやRow…

Column と Row ウィジェットで複数のウィジェットを配置する

今日はColumn とRow について学習しました。 Flutter のColumn とRow の概念はiOSのUIKitにはないようなUIです。 一つのレイアウトに複数のウィジェットを配置したい場合に使います。 Androidに近い概念があります。 そのためAndroidのレイアウトと比較して…

レイアウトウィジェットについて

今回はFlutter のレイアウトで使うレイアウトの一部について学習します。 学習するウィジェットはText, Center, Container クラスです。 Text ウィジェット について まずはサンプルコードを書きます。 Text( 'Hello Flutter', style: TextStyle(fontSize: 3…

Flutter におけるボタンウィジェットについて

今回はFlutter で使えるボタンのウィジェットについて学習します。 ButtonWidget の種類について これまでのバックグラウンドがiOSエンジニアでしたのでiOSと比べてみます。 Flutter iOS FlatButton UIButtonと同じ RaisedButton UIButtonが立体的に表示され…

Flutter のState クラスについて勉強する

今回はFlutter の状態を扱う機能であるState クラスについて勉強します。 これまで書いてきた StateクラスはStatelessWidget(静的クラス)でした。 Flutter のState は2種類存在します。 StatelessWidget (静的なState) StatefulWidget (動的なState) よくFlu…

iOSエンジニアがFlutter を触ってみた2

今回は Scaffold と AppBar について勉強しましょう。 Scaffold と AppBar Scaffold はアプリの構成の骨組みみたいなもので家みたいなものをイメージしています。 AppBar はiOS でいうところのNavigationBar そのものです。 では基本構成を見ていきます。 ma…

iOSエンジニアがFlutter を触ってみた

超久しぶりにブログを更新します。 Flutter の基本構成 Flutter アプリの最小限実装 main.dart にこのソースコードを書きます。 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This w…