Flutter入門：パッケージの追加とSampleProjectのカスタマイズ

2021-03-12

この記事の目的

pub.dev公開されているパッケージをFlutterに追加する方法を学びます
SampleProjectに手を加えて、少しずつFlutterについて紐解いていくことを目的に執筆しています。

モチベーション

Flutterでのアプリケーション開発を始めましょうといっても Flutterのサンプルプロジェクトを作成してどこから弄ったら良いのか正直分からないと思います。正直、私もわかっていないことだらけなのですが少しずつ読み解いていくことにします。

Flutterは日本語の記事が少ないのですが、Flutterには幸いにも公式のチュートリアルがあります。チュートリアルがある言語はとにかく回して見るのが良いって古事記にも書かれてますからね。まずはこれを一つずつ進めていこうと思います。

Flutter codelab

lib/main.dart

アプリケーションの画面描画や処理したい内容を記載するメインファイルになります。

チュートリアルのコードをベースに貼り付けます。

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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'),
        ),
      ),
    );
  }
}

動作させると、このような画面が出来上がります。

Androidで最初作られるJavaコードがこのような内容なのですがやっていることは大体同じことをやっています。

Javaコーﾄﾞでは、R.layout.mainでXmlにGUIを記載していましたが、Flutterではコード内に埋め込むことで記載しているようですね。

public class HelloActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Flutterの構造について

Flutterでは文字などの配置、パディング、レイアウトなど、ほとんどすべてがウィジェットです。

pubspec.yaml

アプリのメタデータや外部パッケージやなどを設定するファイルです。

uses-material-design: true

マテリアルデザインを使用したい場合は、この部分をtrueにするなどがあります。

パッケージを追加したい場合もこのファイルに追加していきます。例えばWord_Englishを追加したい場合は、このように書きます。

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  english_words: ^3.1.5

ReactやVueで使う方法と同じですね。

yamlに追記した後は取得コマンドをどちらかを実行することで反映されます。どちらを実行しても、同様の結果が得られます。

flutter packages get

flutter pub get

自前で好みのフォントを適用する場合などでもこのファイルを設定するようです。

特に今回はFirebaseを使う予定は無いですがこのように書いていきます。

pub.devの紹介

english_words チュートリアルで追加されているWord_Englishとは何者なのかというとこちらです。 pub.dev : english_words

「最も多く使用されている英語の単語といくつかのユーティリティ関数を含むパッケージ。」とのことです。

pub.devを探してみるといろんなパッケージが公開されています。

例えば、地図情報のアプリケーションを作る上で役立ちそうなパッケージとしてこんなものがあったりします。 geolocator

Flutter開発を行っていると、お世話になるサイトの１つです。

lib/main.dartにenglish_wordsをインポートする

english_wordsパッケージを使用するために、lib/main.dartの先頭に次のインポート文を追加します。

import 'package:english_words/english_words.dart';

このインポート文を追加することで、english_wordsパッケージのWordPairクラスやasPascalCaseメソッドなどが利用可能になります。

  Widget build(BuildContext context) {            
+ final wordPair = WordPair.random();        
  return MaterialApp(
...中略
                     body: Center(
- child: Text('Hello World'),            
+                      child: Text(wordPair.asPascalCase),
                      ),