最小コードのアプリ

Flutterで動く最小コードのアプリ

アプリ開発をまったくやったことがない僕が、勉強のために作ってみたサンプルコードをご紹介します。

 

このアプリは、AppBarにタイトルが表示されるだけのアプリです。

Flutterをはじめてやる、アプリ開発をはじめてやるっていう人に少しでも参考になれば嬉しいです。

 

サンプルコード全文

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welicome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('はじめてのflutter'),
        ),
        body: Container(),
      ),
    );
  }
}

 

【解説】

はじめに

アプリが起動されると、 Widget （要素）が build （構築）されます。

つまり、「指定した文字や画像など（ウィジェット）が表示される」ということです。

 

appBar

 appBar は、アプリの上部にある、タイトルなどを表示するバーのことです。

 title に Text ウィジェットで文字を表示させています。

 

body

bodyは、ボディです。

 appBar 以下の、メイン部分のことです。

 

container

 container は、からの箱のようなものです。

この中に、 Text ウィジェットなどを入れたりして表示するものを指定できます。

 

StatelessWidget

 StatelessWidget は、状態を持たないウィジェットと呼ばれます。

つまり、状態に変化がおきない（動きがない）ウィジェットを配置する時は、 StatelessWidget で指定します。

逆に、状態が変化するウィジェットを配置するときは、 StatefullWidget を使います。

たとえば、ボタンが押されたら画面の文字を変化させる時には、 StatefullWidget を使います。

 

コード全文（おさらい）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welicome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('はじめてのflutter'),
        ),
        body: Container(),
      ),
    );
  }
}

 

まとめ

• プログラムには、何を表示させるか書く。
• 状態が変化するものは、StatefullWidgetの中に書く。
• 状態が変化しないものは、StatelessWidgetの中に書く。