5分で始めるFlutter

DartPad

Flutterの開発環境がない場合は、以下のDart Padを使うとすぐFlutterの動作が確認できます。
https://dartpad.dev/

試しに以下のコードを入れてみましょう。

import 'package:flutter/material.dart';

void main() {
  runApp(
    Container(
      color: Colors.white,
      child: const Center(
        child: Text(
          'Hello, world!',
          textDirection: TextDirection.ltr,
        ),
      ),
    ),
  );
}

右ペインに実行結果画面が表示されました！

各種テンプレート

以下は今後更新の予定。

Flutterアプリの最小コード

import 'package:flutter/material.dart';

void main() {
  runApp(
    // Widget
  );
}

StatelessWidget

class StatelessWidgetExample extends StatelessWidget {
  const StatelessWidgetExample({super.key});

  @override
  Widget build(BuildContext context) {
    return  // Widget
  };
}

StatefulWidget

class StatefulWidgetExample extends StatefulWidget {
  const StatefulWidgetExample({super.key});

  @override
  State<StatefulWidgetExample> createState() => _StatefulWidgetExampleState();
}

class _StatefulWidgetExampleState extends State<StatefulWidgetExample> {
  @override
  Widget build(BuildContext context) {
    return // Widget
       // when you change any state:
       setState( () {
          // change the state
       } );
  };
}