🧸

【Flutter】【初心者向け】Dev Tools を使ってみよう！

2021/11/18に公開

Flutter

Dart

tech

はじめに

ご覧いただきありがとうございます。ganです。

今回はFlutter を使うなら欠かせない『Dev Tools』について書いていきます。自分は最近使い始めたのですが、もうこれがないと生きていけません。（それくらい便利です！）

なるべく画像多めで詳しく書いたので、使ってなかったよって人はぜひ使ってみてください！！

Dev Tools とは？

はじめにDev Tools とは何かを説明します。

Dev Tools というのはFlutter やDart を使って開発をする人向けのもので、アプリのレイアウト検証(layout inspection)やパフォーマンス(performance), メモリ、またデバッグなどを効率よくとこなうためのWebアプリケーションツールです。

かなり便利な機能がいくつもありますが、今回はレイアウト検証(Flutter Inspector)について重点的に解説します。

使い方

サンプルコード

サンプルとして以下のようなアプリを使用します。

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dev Toolsを使ってみよう！！'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            children: [
              ElevatedButton(onPressed: () {}, child: const Text('buttonA')),
              ElevatedButton(onPressed: () {}, child: const Text('buttonB')),
              ElevatedButton(onPressed: () {}, child: const Text('buttonC')),
            ],
          ),
          Image.network(
            'https://www.w2solution.co.jp/tech/wp-content/uploads/2020/05/flutter-top.png',
            height: 150,
            fit: BoxFit.fill,
          ),
          const SizedBox(
            height: 16,
          ),
          const Text(
            'Dev Toolsを使ってみよう！',
          ),
          const Text(
            'My application is great! Everyone often uses it in my classroom.',
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}