「Flutterのいじり方①」 ~私文男子の格闘第4話~

#はじめに
(2020/5/11投稿)
最近オンライン授業に慣れ、もう学校行きたくないとなっています。どうも私文男子です。

前々回の記事でFlutter環境を整えてみたものの、どこをいじれば良いのかさっぱりわからなかったので、どこのコードをどうやって変えれば良いのか分かった部分をレポートしたいと思います。

#テキストエディタのインストール
まずはテキストエディタを整備します。
テキストエディタってなんやと思って調べたところ、どうやらプログラマーがよく画面に出しているブラックバックのかっこいいやつはテキストエディタらしいということがわかりました。

そして、それはどうやらダウンロードしたやつの方が良いらしいということもわかりました。
私は昔、HTMLファイルの受け渡しとかをやっていてAtomというものがパソコンにまだ残っていたのですが、バージョンも古かったので一度アンインストール。
心機一転Visual Studio Codeというものをインストールしてみました。

私はFlutterのことをメインに書いて行きたいと思っているので、インストール＆日本語化まではここでは割愛します。
便利な世の中なので他の方の記事を参考にしましょう。

#画面をいじるための手順
###手順1　「Visual Studio Codeに、Flutterのプラグインをインストール」

VScodeを起動して、1番左の上から4番目のブロックのようなアイコンをクリック。
検索窓にFlutterと打ち込んで出てきた合致したプラグインをインストールしましょう。

###手順2　「ファイルを開く」
前回作った「my_app」というファイルをVScode上で開きます。
my_appの作り方はこちらを参考にしてください。
https://qiita.com/shibundanshi/items/cbcb5e84d0c8a26b9566

ホーム画面から「開く」
↓
「my_app」を選択

下のような画面になれば完了です。

###手順3　「main_dart」を開く
my_appを開いた状態だと、たくさんのファイルがまだ中に入っています。
ではどこをいじれば画面が作れるのでしょうか？

答えは**「main_dart」**というファイルです。このファイルは「lib」というファイルの中にあります。
このファイルの中身をいじると画面をいじれるようです。
他のファイルで何ができるかはまだ全くわからないので、調べてまた書こうと思います。

main_dartをひらくとこんな感じになると思います。

写真は少しいじった後のものなので中身はあまり気にしないでください(撮り忘れた)

ブラックバックにハイライトされた文字列...

エンジニアっぽい...!
そんな感動を覚えました。

###手順4　「1回デバッグしてみる」
さて、いよいよ中身をいじって画面を変えてみたいと思います。

デフォルトで作られているこのアプリは、+ボタンを押した回数が表示されるアプリだったので、わかりやすいようにヘッダー部分だけのUIのアプリに変えてしまいましょう。
もともとのコードを全て削除し、以下のコードを貼り付けてみましょう。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);

 final String title;

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar:AppBar(
       // Here we take the value from the MyHomePage object that was created by
       // the App.build method, and use it to set our appbar title.
       title: Text(widget.title),
     ), 
     body: Container(
       child:
         Placeholder(),
     ),
   );
 }
}

貼り付けられたら、今度はシュミレーターにこいつを反映させてみます。
command +sでまずはセーブします。

次にコードを実行(デバッグ)してみます。
実機につなげるよりもシュミレーターを使った方が楽だと思ったので、今回はシュミレーターを使うことにしました。

1番下のオレンジないし青のバーにある

右から数えて3番目のセクションにあるところをいじって「iPhone SE」というのをクリックしましょう。
これで、シュミレーターとの接続は完了しました。

続いて今度は左のバーの虫のアイコンをクリック。
そして左上にある実行ボタンを選択しましょう。

実行をクリックして、正しく表示ができると次のような画面が現れます。

現れたらこのステップはOKです。

###手順5 「中身をいじってみる」
ここまでくればあとは中身をいじって、ファイルを保存さえすれば勝手にUI画面が変わってくれます。
私はヘッダー部分をいじって、色と文字を変えてみました！
コードを2箇所いじっただけです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.green,
     ),
     home: MyHomePage(title: '私文男子の格闘'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);

 final String title;

 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar:AppBar(
       // Here we take the value from the MyHomePage object that was created by
       // the App.build method, and use it to set our appbar title.
       title: Text(widget.title),
     ), 
     body: Container(
       child:
         Placeholder(),
     ),
   );
 }
}

これで、どこをどういじれば良いのかわかったかと思います！

#まとめ/感想/気付き
・FlutterではVScodeをインストールして、main_dartのファイルをいじってデバッグするという開発のながれになることがわかりました。現実は違うかもだけど...笑

・思ったよりも簡単にデバッグやプレビューができるというふうに感じました。他を知らないので何とも言えないですが、Flutterの強みと言えそうです。

・main_dartの部分をフォーカスしましたが、他に入ってるファイルの意味/構成を理解したいなと思いました。

・中に書いてあることがほとんどわからなかったので理解できるようにdartの勉強をしないといけないと思いました。

ということで開発できそうなスタートラインまできました。
次回はdart言語について学習した記事を書こうと思います！それではまた！