Flutter の Web アプリサンプルのコードをながめてみる
※ これは 2020/01/18 時点の flutter v1.12.13 の情報です
最新版では動作が異なる可能性がありますのでご注意ください
とりあえず Flutter の Hello world レベルの Web アプリサンプルは動かせましたが、もうちょっとちゃんとしたサンプルがあったので動かしてみる
動かすサンプルは Gallery
VSCode で前回と同じくターミナルを開いてコマンド実行
cd flutter_web/examples/gallery flutter packages upgrade flutter pub global run webdev serve
こんな感じの UI を確認できるサンプルの模様
なるほどと思って、サンプルコードの中の 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 を使いたい意欲が一気にダウン!