フラッターコードを作りましょう


Android開発を学んだ後、私はネイティブコード- Javaは、現在のKoltlin -私は前進する方法を知っていた.私はすべてのクロスプラットフォームのオプションを聞いたが、彼らは私に良い音を鳴らした.私は、常に彼らがsubparオプションであるように感じました;私は彼らと一緒に見たアプリは、常にクロスプラットフォームのコード(それが意味するもの)から来たように“見た”.
基本的にはスーパージャッジだった.
しかし、彼らのために常に必要がありました.私がネイティブのAndroidコードだけをしたので、私が連続した1つの問題は、私がビジネスチャンスまたは側プロジェクトを考えたならば、私はAndroidコードをすることができるだけであるということでした.私は潜在的にIOSのアプリを提供したいなら、私はどちらかを手でそれを行うか、他の誰かを雇うことを学ぶ必要があります.
しかし、私は私の銃に立ち往生して、心に浮かぶどんな考えでも決して終わりませんでした.
私の仕事で、私は家で唯一のモバイル開発者になった.私たちは私たちの2つの主要なIOSのアプリの世話をするiOS請負業者を持って、私はAndroidアプリの世話をする.我々は最終的に別の会社を買収した、1つは、AndroidとIOSのアプリを持っていた.
しかし、それはフラッターで書かれました.
「ええ、F *」
私は熱心な学習者、正直です.私は、それがAWSのために働いたので、数年後にPythonでつまらない始めました、そして、それはそれ以来私の乱雑な言語でした.私は本当にそれを知っていません.
それで、私はダーツを学ぶために飛び込みました、そして、私がフラッターですることができたもの.
なぜ私は頑固なのか.
私はダーツとフラッターは学ぶのは簡単だと思うが、確かに学習曲線です.私が勉強しなければならなかった最初のものの1つは、スクリーンを造る方法でした.

レイアウトの作成


私が最初に導入されて以来、Flutterのレイアウトに関する私の考えは変わった.初めに、私はちょっと混乱したが、ちょうど対処する方法を学びました.私は、それが本当の説明を必要としないプログラミング言語のそれらのものの1つと考えました.ちょうどその方法を学び、移動します.
しかし、今、私はそれとより多くの時間を過ごしました(そして、Androidは構成を発表しました)、私はフラッターのレイアウトを少し違って見ます.私は、彼らがAndroidで使用されるXMLレイアウトと大きく異なると思っていました.
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white">

    <TextView
        android:id="@+id/hello_world"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
                android:layout_gravity="center"
        android:text="Hello World!"/>

</LinearLayout>
基本的なレイアウトでは、私たちの主なViewGroup(線形レイアウトのような何か)または私の大好きなDefault - ConstrintLayoutを持ちます.“こんにちは世界を表示するには!”我々はテキストビューをスローし、ビュー内の中心にするように指示します.完了.
私がフラッターでこれをする方法を学んだとき、私は困惑しました.これはダートで行われたいくつかの奇妙な入れ子の階層であった.それらは別々のファイルではありません!

フラッターでは、returnウィジェットをビルド関数にしなければなりません.その関数では、ウィジェットが別の子である奇妙な階層の中で、ウィジェットを深くネストさせます.そして、どのように見えて配置されるかを変更するために、それぞれの設定を適用します.
ああ、待ちます.それはまさにXMLのようです.
@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: Text("Hello !"),
    );
  }
それは技術的にそれです.私は足場とsafeareaを加えることによってより複雑にすることができます、しかし、これは正直に非常に単純です.実際、それはXMLよりおそらく単純です.
あなたが最初にAndroid Studioでフラッタープロジェクトを作成すると、彼らはあなたに足場を含む素晴らしいスタートレイアウトを与える.定義を見ないで、それを説明するために最善を尽くします.
フラッタの足場は、底のナビゲーションと浮動アクションボタンでトップにツールバーを持っている可能性があるその基本的なUIレイアウトです.あなたはおそらくなしで行うことができるし、それをすべて自分で作る.それは実際に私はAndroidのレイアウトで何をすべきか、私が必要なものを追加し、合理化レイアウトで正しくそれを調整することです.フラッターでは、足場はおそらくそれについて行く最良の方法です.そしてそれは超簡単です!
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
まだいくつかの使用を取得する1つのことは、あなたが本当に文字列を使用していないということです.フラッタでは、ほとんど常にテキストウィジェットでラップします.事実上、テキストの場所を持っている大部分のウィジェットは、ウィジェットを必要とするだけです.
これは、ボックスのすべてのいくつかの狂気のことを行うことができることを意味します.たとえば、AppBarでは、Androidのタイトルパラメータはおそらくジェネリック文字列になります.フラッターでは、しかし、それはウィジェットだけかかります.テキストはウィジェットですが、コンテナです.または別の足場!
別の足場を置かないでください.
しかし、これは私が字幕を追加したいならば、私はタイトルが示される方法をカスタマイズすることができます、コラム(もう一つの装置)を彼らのために部屋で加えてください.または多分私はちょうどイメージが欲しい.可能性はかなり無限大です.
再び、別の足場を置かないでください.

主な武器


そこには100万のウィジェットがありますが、ここで私は常に私のレイアウトのために使用するものです.

テキスト


すべての文字列が必要です.あなたはそれにテキストスタイルを追加することによって、それらをスタイルすることができます.

行と列


これらはテーブルのリテラルビルディングブロックです.あなたがHTMLによく慣れているならば、これらの2は同じものを使用します.(私が実際にウェブサイトを作ったのは、ポケモンが新しく、ポケモンのウェブサイトがインターネットを支配していた時でした).行は水平、列、垂直です.必要に応じて他の行と列を含むウィジェットのリストを取る.

視程


これは奇妙なものを学ぶためだった.Androidでは、ビューに設定できる可視性の値があります.フラッターではなかった.しかし、あなたはそれらを可視ウィジェットで包んで、それに応じて旗をセットすることができます.

センター


可視性と同様に、これは学習曲線のビットだった.

menuitem


これは私の会社のアプリが設定されている方法のためかもしれないが、私はどこでもこの小さなものを使用します.私はそれを必要とする潜在的な字幕を持つ、左、タイトルにアイコンを?簡単.

ストリーマ


ため息.私はこのブログの記事の中でこのウィジェットの深さには行きません.私はブロックパターンに新しいです、そこで、シンクと流れは重く使用されます、そして、このことは流れに頼ります.私は最終的には、ブロックのパターンとどのようにそれを活用するために私の考えを書くつもりですが、その後、このウィジェット上でthe Flutter website has an amazing pageまで.
それは私が今日に入るつもりです.特定の何も.私は本当にそれをしようとしてフェンスの上にいた人々を取得したい.お試しください.それは超簡単であり、非常に多くの可能性のためのドアを開きます.
私はまだdiehardアンドロイドのネイティブの男です.lol