How to study flutter using by Udemy2

2.きれいにコードを書く

①StatelessWidgetとStatefulwidget

〇StatelessWidget：state（状態）を持たないWidget→変数を定義しても、その変数は親Widgetより渡されるのみで、自分でその値を更新することはできません。

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[50],
       appBar: AppBar(
         title: Text('I Am Rich'),
         backgroundColor: Colors.teal[700],
       ),
       body: Center(
           child: Image(
             image: AssetImage('images/enpitu.png'),
           )
       ),
     ),
   );
 }
 }

〇StatefulWidget:State（状態）を持つWidget→状態を持つため、自分の変数を更新することで自分自身を再ビルドすることができます。

【Flutter入門】StatelessWidgetとStatefulWidgetの違い【Flutter入門】StatelessWidgetとStatefulWidgetの違い

②その他のウィジェット

Flutter開発する前に知っておきたい35のWidget一覧 - Qiita

〇safearea
適切なコンテンツ領域に表示されるようにします。
見切れなくなる！

        body:SafeArea(
         child: Container(
             color: Colors.white,
             child: Text('Number of donuts eaten')
         ),

セーフエリアに表示する

〇FloatingActionButton
タップした時の動作を指定

        floatingActionButton: FloatingActionButton(
         backgroundColor: Colors.teal[900],
         child: Icon(
             Icons.add,
         ),

【Android】5分でFloatingActionButtonを実装する - Qiita

Flutterで2つのFloatingActionButtonを表示する方法 - Qiita

〇layout

Layout widgets

〇Container
1つのまとまり

〇AppBar
AppBar はアプリケーションの上部に配置して、アプリケーションのよく使う機能へのショートカットや各種機能へのナビゲーションに使います。

Flight Booking | Flutterで始めるアプリ開発

class MyApp extends StatelessWidget {

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       backgroundColor: Colors.teal[50],
       appBar: AppBar(
         title: Text('I Am Rich'),
         backgroundColor: Colors.teal[700],
       ),
       body: SafeArea(
         child: Container(
           height: 100.0,
           width: 100.0,
           margin: EdgeInsets.symmetric(vertical: 50.0,
           horizontal: 10.0),
           color: Colors.white,
           child: Text('Hello'),
         ),
       ),
     ),
   );
 }
}

〇EdgeInsets.fromLTRB/EdgeInsets.only
margin: EdgeInsets.fromLTRB(left, top, right, bottom),

nzigen.com/flutter-reference/2018-04-15-padding.html

padding: EdgeInsets.all(20.0),

paddingとmarginの違いをできる限り難しい言葉を使わず説明してみた

〇ColumsnとRows

〇MainAxisAlignmentと CrossAxisAlignment
Containerの位置を指定できる

Flutter: MainAxisAlignmentを理解する - Qiita

［Flutter］ MainAxisAlignment と CrossAxisAlignment の利用方法 - Qiita

〇sizebox 
widgetを特定のサイズに指定したいときいにContainerの代わりに使う

【日本語版】【Flutter】Widget of the Week – #29 SizedBox【要約】

※ボックス内で無限指定　サイズプロパティでdouble.infinityを使う

child:Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children:<Widget>[
           Container(
             height: 100.0,
             width: 100.0,
             // margin: EdgeInsets.only(left:30.0),
             // padding: EdgeInsets.all(20.0),
             color: Colors.white,
             child: Text('Container 1'),
           ),
           SizedBox(
             width: 30.0,
           ), 
           Container(
               width:100.0,
               height:100.0,
               color:Colors.blue,
               child: Text('Container 2'),
                 ),
           Container(
               width:100.0,
               height:100.0,
               color:Colors.red,
               child: Text('Container 3'),
             ),

           ],
         ),

〇CircleAvatar
丸いウィジェット出す

children: <Widget>[
             CircleAvatar(
               radius:50.0,
               backgroundColor: Colors.red,
             )