Flutter memo: day2

Hot ReloadとContainer Widget、Column, Row Widgetです。

Hot Reload

ちゃんとHot Reloadを動作させるためには、class Hoge extends ...で関数作っておくこと。runApp(ココ)に色々書いてもダメだよー

import 'package:flutter/material.dart';

void main() {
 runApp(
   MyApp()　// MyAppを実行
 );
}

class MyApp extends StatelessWidget {  // MyAppを作成
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
    なんだかんだ、MyAppの中身的なことを書く
   );
 }
}

Container Widget

htmlのdivみたいなもんだけど、他のコンテンツを内包できません。Atomicデザインの最小単位的な感じで使うのかなぁ〜

コンテナウィジェットを使用すると、長方形の視覚要素を作成できます。コンテナは、背景、境界線、影などのBoxDecorationで装飾できます。コンテナには、そのサイズに適用されるマージン、パディング、および制約を含めることもできます。さらに、コンテナは、行列を使用して3次元空間に変換できます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
       home: Scaffold(
         backgroundColor: Colors.teal,
         appBar: AppBar(
           title: Text('Container Widget!'),
           backgroundColor: Colors.green,
         ),
         body: SafeArea(
           child: Container(
             color: Colors.white,
             child: Text('hello'),
             width: 120.0,
             height: 100.0,
             margin: EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
             padding: EdgeInsets.all(10.0),
           ),
         ),
       ),
   );
 }
}

Row, Column Widget

children: [] で複数のコンテンツを内包できる。cssのdisplay: flex; みたいなノリ。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
       home: Scaffold(
         backgroundColor: Colors.teal,
         appBar: AppBar(
           title: Text('Column Widget!'),
           backgroundColor: Colors.green,
         ),
         body: SafeArea(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.end, // 主軸（columnなので縦方向）に対してendに揃える
             crossAxisAlignment: CrossAxisAlignment.end, // 垂直軸（columnなので横方向）で、Containerのend（右）に揃える
             children: [
               Container(
                 color: Colors.red,
                 child: Text('Container 1'),
                 width: 200.0,
                 height: 200.0,
                 padding: EdgeInsets.all(10.0),
               ),
               Container(
                 color: Colors.blue,
                 child: Text('Container 2'),
                 width: 100.0,
                 height: 100.0,
                 alignment: Alignment.center,
               ),
               Container(
                 color: Colors.yellow,
                 child: Text('Container 3'),
                 width: 80.0,
                 height: 80.0,
                 padding: EdgeInsets.only(left: 4.0),
               ),
             ],
           ),
         ),
       ),
   );
 }
}

以上。

楽しみにしているのに気を抜くと、Fluttterできない日がある。。。