Flutter for WebでReactのアレをやってみる
はじめに
Flutter for Webが発表されましたね!!
今までモバイルを中心に活躍していたFlutterがWebに進出することになりました
これでフロントエンド界隈に新たな勢力が出てくることになりますね...
Reactのアレをやってみよう!
Reactだと、
create-react-app <アプリ名>
とした際にプロジェクトを作成すると、
のような初期プロジェクトが作成されます。
なんかかっこいい...
これをFlutterでできないだろうか...
とりあえずFlutter for Webをはじめてみる
GitHubに公式が上げてくれたものがあるので、とりあえずそれをCloneします。
Flutterのバージョン
どうやらFlutterのversionは1.5以上なので、
flutter --version
で確認して、もし古ければ
flutter upgrade
でflutter SDKごとUpgradeします。
flutter web用の環境設定
flutter pub global activate webdev
でbuild toolを入れていきます。
プロジェクトを開く
さっきCloneしたもののなかにexamples
ディレクトリがあり、そこに簡単なサンプルがあります。
今回は、spinning_square
をベースにやっていきます。
コードを書いていく
packageまわり
プロジェクト内で
flutter pub upgrade
をして、packageの更新を行います。
一旦実行してみる
flutter pub global run webdev
を実行すると、http://localhost:8080/#/
で緑色の四角形が回っているのが確認できます。
こんなかんじになるはず!!
とりあえず、画像をとってくる!
公式のページにリンクがあります!
これです!
そこからロゴをとってきてください
画像をプロジェクトに取り込む
Qiita: Flutter Web: Tips集
を参考にしました。
ディレクトリは、
|--lib
| |--main.dart
|--.packages
|--pubspec.lock
|--pubspec.yaml
|--web
| |--index.html
| |--main.dart
このようになっていますが、
web/assets
に入れるとのことです
実際に画像を表示させる
さて、画像も取り込めたのでコード上でロードして表示させましょう。
@override
Widget build(BuildContext context) {
return new RotationTransition(
turns: _animation,
child: new Container(
width: 200.0,
height: 200.0,
color: const Color(0xFF00FF00),
));
}
という部分がありますが、ここを以下のように変更します。
@override
Widget build(BuildContext context) {
return new RotationTransition(
turns: _animation,
child: Image.asset('<ここはファイル名>')
);
}
他にも、ネットワーク上から画像を取得する、といったこともImage
を使ってできるようです。
ここまでやると、以下のようにFlutterのロゴが回転します。
ね、簡単でしょ
最後に
GitHub上にコードを上げてます。
Author And Source
この問題について(Flutter for WebでReactのアレをやってみる), 我々は、より多くの情報をここで見つけました https://qiita.com/jiko21/items/85d72be27ec80d989bad著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .