6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

D言語くんAdvent Calendar 2019

Day 21

D言語くんと過ごすクリスマス🎄

Last updated at Posted at 2019-12-20

D言語くんと遊んでみる

12月上旬に2019年のアドベントカレンダーを眺めていると,D言語くんが私の方に近づいてきて何かを語りかけているかのような表情でこちらを見ていたので記事を書くことにしました.

概要

  • D言語くんのメリークリスマス(メイン)
  • Flutterに関して

丁度Flutterの勉強がてらだったので,とても(本当に!)簡単な感じのアプリです.
(D言語くんのアドカレ参加してみたい!という気持ちがかなり先行してしまった...)

D言語くんのメリークリスマス

D言語くんをタップすると,FlutterのMaterialに入っているありったけのアクセントカラーで
Merry Christmas!と言ってくれます.
タップしてる感があまりないですが,以下がその様子です.
ezgif.com-video-to-gif.gif

もっとD言語くんが動けるようにしたかったな〜!(他にやる事があったのにアドカレを課した末ですが)

Flutterを使ってみたことについて

実装

今回のアプリは,画像をタップしたらラベルを表示(追加)するものです.自由な位置に画像等を配置したかったため,Stackというウィジットを使用しました.
私が特に悩んだのが,タップしたら画面上のどこかに新規でテキストラベルを表示させる事でした.タップしてコンソールにログを出すのは出来てiOS開発におけるaddSubviewみたいなものがすぐに分かりませんでしたが,List<Widget>()を使うと良いみたいです.以下のように,画面パーツを配置しておいて,

main.dart

Widget build(BuildContext context){
    // 略 dmanImg 
    final hogeWidget = List<Widget>();
    Widget dmanPositioned = Positioned(
      top: 240,
      left: 130,
      child: dmanImg,
    );

    Widget container = Stack(
      children: <Widget>[
        dmanPositioned,
      ]+
      hogeWidget,
    );
    return container;
}

class _hogeStateの中でタップ時の関数内に,

setState((){
    hogeWidget.add(追加したい何か);
});

とすれば出来ました.
全体のコードはこちら:main.dart

感想

これはDart言語を使ってiOS,Android,Webのアプリケーションを作れるものです.(Javaに似てるとか聞くけども,Javaを使ってアプリを作った事はないのでそれに関してはよくわからん)
iOSのネイティブで作っていると,真っ白の画面からパーツを片っ端から配置していくような感覚(福笑い的な)があるから,ビューのパーツの並びに対して規則の決められ感(パズルみたいな)が強いなぁと感じた.それゆえにStackっていうウィジットが自由で好きですね.
あと,gitignoreが自動でプロジェクトに入っててびっくりした.

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?