Flutter はじめに

今回からFlutterをやります。

開発環境

PCで開発する場合、Flutter本体をインストールして、Android StudioやVisual Studio Codeに連携して開発します。

詳細はFlutter公式ページを参照して下さい。

簡単に動かすだけならDartPadやZapp!でブラウザだけで動作確認できます。

Hello World

Hello, World!と表示するだけの単純なサンプルになります。

main.dart


import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Text('Hello, World!'),
    );
  }
}

実行結果

それっぽい画面

Scaffoldを使って、タイトルバー、メイン、ボタンの形式にしてみます。


import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("title")),
        body: Center(child: Text('Hello, World!')),
        floatingActionButton: FloatingActionButton(
          onPressed: null,
          child: const Icon(Icons.search),
        ),
      ),
    );
  }
}

実行結果

ページのトップへ戻る