Flutterの雰囲気を理解する

k-boyの動画でflutter軽く学びます！
https://www.youtube.com/watch?v=-G7nW26N7_4&list=PLuLRJz1UnJzEDjRr1XkqyOzFzUi3Df4B0

Flutterの全体像を把握する

スマホアプリ開発ができる言語。
IOSなら代表的なのはSwift。AndroidならKotlin。そしてIOSとAndroid両方を作れるflutterみたいな感じ。両方で動くプログラムはクロスプラットフォームというらしい。

flutterの特徴

flutterの特徴を簡単にまとめるとこんな感じ。

• dart←製的型付け?オブジェクト指向言語(String, int, bool...)
• 独自のレンダリングエンジン
• Widget←これを並べてアプリのUIを作る。(Text(), Container(), Column(), Row()...)

WidgetでUIを作って、dartでif文とかfor文とかのロジック系を書いていく感じ。多分。

flutterのアーキテクチャ

1. 全部画面ごとに全部書く(1つの画面ごとに1つのdartファイル)
2. BLoC(ビジネスブロックコンポーネント)
3. ScopedModel()
4. Provider

Widgetの状態は2種類ある

• StatefulWidget、状態があるWidget
• StateLessWidget、状態を持たないWidget←できるだけこっちを使うのがいいみたい。

Wiget自体の種類は3種類ある

• Material(マテリアルなデザイン、実際の物質的な雰囲気のあるUI、影があったり、押すと凹んだり...)←よく使う
• Cupatino(クパチーノ、Apple Parkがあるところ、IOSっぽいデザイン。NavigationBar、dialog、switch、アイフォンとかで見たことあるようなUI )
• それ以外(テキスト、画像、スクロール...)

Material系はこんな感じ


Cupatino系はこんな感じ

基本的なWidgetの使い方

Widget は大きく分けて以下の２通りに分けられる。

• 見た目をデザインするための Widget
• レイアウトや状態管理をするための Widget

ScaffoldやTextは見た目をデザインするための画面上に実際に表示されるWidgetで、CenterやColumnは子Widgetをレイアウトをするための画面上には表示されないWidget。

Scaffold ... アプリの基本的な画面のレイアウトを構成してくれるWidget
AppBar ... ヘッダー部分を構成するWidget
Column ... 縦に複数のウィジェットを並べて配置する時に使用するWidget。mainAxisAlignmentで縦方向の位置を調整できる。
Row ... Columnとは逆に、複数の要素を横並びに配置するときに使用するWidget。
Padding ... 余白を作るWidget。paddingプロパティにEdgeInsets.all(8.0)みたいにすると要素の周りに余白ができる。
Container ... colorやheight、widthといったプロパティが用意されているWidget。Widgetを囲んで使用する。

WidgetにはそれぞれのWidget毎にプロパティが予め用意されており、色を変えたり、大きさを調整したり、更にWidgetを追加したりなどはすべてWidgetが持つプロパティに書いていく。プロパティとはWidgetがどんなものか表す情報のこと。

Scaffold(
  backgroundColor: Colors.yellow,
  body: Center(
    child: Text(
      'Welcome to KBOYs Flutter University!!',
      style: TextStyle(color: Colors.blue),
    ),
  ),
);

それぞれ、

• Scaffold : プロパティ「backgroundColor」で背景色を黄色に指定、プロパティ「body」にCenterを設置
• Center : プロパティ「child」にTextを設置
• Text : プロパティ「style」にTextSyleを設置
• TextStyel : プロパティ「color」 で文字の色を青に指定

このようにプロパティに必要なWidgetを設定している。

なお、プロパティは「body」、「child」、「appBar」といったように小文字から始まり、Widgetは「Text」、「Container」といったように大文字から始まるというルールで用意されている。

Flutterの画面遷移

https://flutter.dev/docs/cookbook/navigation/navigation-basics
公式ドキュメント参照

ページを2つ用意して、

//ページ1
class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            //2つ目のページに遷移する処理
          },
        ),
      ),
    );
  }
}

//ページ2
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            //前のページに戻る処理
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Navigator.push（）を使用して2番目のルートに移動

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

Navigator.pop（）を使用して最初のルートに戻ります

onPressed: () {
  Navigator.pop(context);
}

こんな感じで簡単にページ遷移が実現できるみたいです。
flutterが雰囲気わかった気がしまーす！
ありがとうございました！