しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

Flutter の Web アプリサンプルのコードをながめてみる

※ これは 2020/01/18 時点の flutter v1.12.13 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

とりあえず Flutter の Hello world レベルの Web アプリサンプルは動かせましたが、もうちょっとちゃんとしたサンプルがあったので動かしてみる

Gallery サンプル

動かすサンプルは Gallery

VSCode で前回と同じくターミナルを開いてコマンド実行

cd flutter_web/examples/gallery
flutter packages upgrade
flutter pub global run webdev serve

こんな感じの UI を確認できるサンプルの模様

Flutter Web 起動

なるほどと思って、サンプルコードの中の home.dart をのぞいてみると・・・

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:math' as math;
import 'dart:developer';

import 'package:flutter_web/material.dart';

import 'backdrop.dart';
import 'demos.dart';

const Color _kFlutterBlue = Color(0xFF003D75);
const double _kDemoItemHeight = 64.0;
const Duration _kFrontLayerSwitchDuration = Duration(milliseconds: 300);

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 34.0,
        height: 34.0,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              'logos/flutter_white/logo.png',
              //package: _kGalleryAssetsPackage,
            ),
          ),
        ),
      ),
    );
  }
}

あ~これ UI をカッコつき入れ子で記述するタイプ、Web なのに

ずっと UI 系の開発をしてたからわかる・・・これはデザインとコード構造の乖離が大きくなるので組みにくいやつです

しかも TypeScript は利用できないらしい

この時点で Flutter を使いたい意欲が一気にダウン!