Zenn
Closed21

学習ログ: Flutter入門してみる

Flutter
初心者
ばつしい / vatscyばつしい / vatscy

Flutterのインストール

macOS Catalina (10.15.7) に対してFlutterをインストール

Flutter SDKのインストールと配置

$ git clone https://github.com/flutter/flutter
$ sudo mv flutter /usr/local/

usr/local/flutter/bin にPATHを通す

$ sudo vi /etc/paths
ばつしい / vatscyばつしい / vatscy

Android Studio, Visual Studio Codeのセットアップ

Android StudioとVisual Studio Codeは既にインストール済みだったので、FlutterとDartのプラグインを追加した。

ばつしい / vatscyばつしい / vatscy

セットアップ状況の確認

$ flutter doctor
output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Mac OS X 10.15.7 19H2 darwin-x64, locale ja)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.51.1)
[✓] Connected device (2 available)

• No issues found!
ばつしい / vatscyばつしい / vatscy

サンプルプログラムを動かす

Visual Studio Codeのコマンドパレットから Flutter: New Project でテンプレートプロジェクトを作成。

エディタの右下からアプリの展開先を指定可能。

F5でビルド＆実行。（今回はiOS Simulatorを使ってみた）

ばつしい / vatscyばつしい / vatscy

Write my first Flutter app

Write your first Flutter appを参考にHello worldしてみる。

テンプレートの main.dart の中身を空にしてHello worldするコードを書いていく。
（Dartとエディタの雰囲気を掴むために写経していく）

  • Hello worldレベルでは特にDart特有のクセとかは感じない
    • インスタンス（表現合ってるかわかんない）作るときに new 要らないんだ〜くらい
  • プラグインのおかげで補完が効くのでスラスラ書ける
  • UIはコードベースで作る
  • フォーマットは option+shift+F
    • 普通はFormat on saveを設定する（私は諸事情により未設定）
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter !!'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
ばつしい / vatscyばつしい / vatscy

pubspec.yaml がNode.jsでいうところの package.json に相当する。
dependenciesにパッケージ追加して下記コマンドを実行するとパッケージインストールされる。

$ flutter pub get
ばつしい / vatscyばつしい / vatscy

ステートフルなウィジェットを追加する

FlutterはWidget(コンポーネント)を並べてUIを作っていく。

stful とタイプするとステートフルなWidgetのボイラープレートを展開してくれる。便利。

ボイラープレート
class  extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

ボイラープレートを埋めたのがこちら

class RandomWords extends StatefulWidget {
  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

これで自作Widgetができた。実際に動かしてみる。

ばつしい / vatscyばつしい / vatscy

ListViewを作る

ListViewを配置し、itemを動的に生成して無限リストにする例

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
        backgroundColor: Color.fromRGBO(100, 50, 100, 1),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          if (i.isOdd) return Divider();

          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

ばつしい / vatscyばつしい / vatscy

Dartの文法

Flutterの学習中にDartの細かな文法が気になってきたので調べることに。
https://qiita.com/hiko1129/items/90a201f857fb125bd8ef
特に気になっていたのが文字列内での変数展開

int _counter = 0;
'$_counter' // こういうやつ

この変数展開の後続に文字列つなげられるのか？と疑問だったが ${} も使えるらしいので多分こう書くんだと思う。

'${_counter}回'

あとは変数宣言のためのvar, dynamic, final, const。
DartのfinalはC#のconstだが、Dartのconstはimmutableにすることができる。
例えばリスト型の場合、finalで宣言しても中身は書き換え可能だが、constで宣言すると中身の書き換えもできなくなる。

final List<int> list1 = [1, 2, 3];
list1[0] = 100; // OK

const List<int> list2 = [1, 2, 3];
list2[0] = 100; // NG
ばつしい / vatscyばつしい / vatscy

イニシャライザ

初期化時に変数をもらってフィールドにセットする場合、このように簡素に書ける。

class SampleWidget extends StatelessWidget {
  // イニシャライザ
  SampleWidget(this.name); // これだけでnameに値が代入されて初期化される
  // フィールド
  String name;
}
ばつしい / vatscyばつしい / vatscy

そういえばmacOS Big Surにアップデートしたらflutter CLIが正常に動かなくなった。

$ flutter doctor
Building flutter tool...
Got socket error trying to find package file at https://pub.dartlang.org.
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (9 tries left)

キャッシュを削除してみる。

$ rm -rf /path/to/flutter/bin/cache/

直らない・・・
実行環境の問題な気がしている。

ばつしい / vatscyばつしい / vatscy

🎉🎉🎉

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.55.0)
[✓] Connected device (1 available)

• No issues found!
このスクラップは2024/05/01にクローズされました