Ubuntu で Flutter を使う

Ubuntu 22.04 に Flutter をインストールして Web サーバーとして使う方法です。

前提ソフトのインストール

```bash
sudo apt install clang curl pkg-config ninja-build cmake libblkid-dev libgtk-3-dev
```

Flutter のインストール

```bash
git clone https://github.com/flutter/flutter.git
```

/usr/local/flutter に移動する

```bash
sudo mv flutter /usr/local
```

パスを設定

```text
export PATH=$PATH:/usr/local/flutter/bin
```

インストールの確認

```text
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.1.0-0.0.pre.2054, on Ubuntu 22.04.1 LTS
    5.15.0-25-generic, locale ja_JP.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for
      more details.
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] VS Code (version 1.68.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.
```

バージョンの確認

```bash
flutter --version
```

ソフトの作成

```bash
flutter create myapp
cd myapp
```

Web サーバーとして動かす (ポートはランダムになります。)

```text
$ flutter run -d web-server
Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         25.3s
lib/main.dart is being served at http://localhost:42819
```

ブラウザーで
http://localhost:42819
にアクセスする
![flutter_jan07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/c876bfc3-93c9-159f-c130-9655572a9f55.png)

外部からアクセスするには

```bash
flutter run -d web-server --web-hostname=0.0.0.0
```

ポートを指定して起動するには

```bash
flutter run -d web-server --web-port=1234
```

プログラムを改造します。
lib/main.dart を次と差し替えて下さい。

```dart:lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HelloWorld(),
    );
  }
}

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
String str_out = 'こんにちは。\n';
str_out += '今日は晴れています。\n';
str_out += 'Dec/08/2021\n';
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Example App'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Text(
          str_out,
          style: TextStyle(
            fontSize: 70,
            fontWeight: FontWeight.bold,
          )
        ),
      )
    );
  }
}
```

サーバーを起動してブラウザーからアクセス
![flutter_dec08_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/9ac051c5-226b-6a2a-9b76-e1934bf3cbeb.png)

## 確認したバージョン

```text
$ flutter --version
Flutter 3.13.0-7.0.pre.51 • channel master • https://github.com/flutter/flutter.git
Framework • revision d457287f6c (2 hours ago) • 2023-07-20 14:02:12 -0700
Engine • revision 9b2ebf2afe
Tools • Dart 3.1.0 (build 3.1.0-332.0.dev) • DevTools 2.25.0
```