Web 開発者向けの Flutter

このページは HTML に精通したユーザー向けですアプリケーションの UI のコンポーネントを配置するための CSS 構文。 HTML/CSS コードスニペットを、同等の Flutter/Dart コードにマップします。

Flutter はクロスプラットフォームアプリケーションを構築するためのフレームワークです Dart プログラミング言語を使用します。 Dart を使用したプログラミングのいくつかの違いを理解するにはそしてJavaScriptを使ったプログラミング、見るJavaScript 開発者として Dart を学ぶ。

両者の基本的な違いの 1 つは、 Web レイアウトと Flutter レイアウトを設計する、制約がどのように機能するかを学んでいます。ウィジェットのサイズと配置の方法についても説明します。詳細については、を参照してください。制約を理解する。

例では次のことを前提としています。

HTML ドキュメントは次で始まります<!DOCTYPE html>、CSS ボックスモデルすべての HTML 要素に対して次のように設定されますborder-box、 Flutter モデルとの一貫性を保つため。
```
{
    box-sizing: border-box;
}
```
Flutter における「Lorem ipsum」テキストのデフォルトのスタイルによって定義されますbold24Roboto次のような変数、構文を単純にするために、次のようにします。
```
TextStyle bold24Roboto = const TextStyle(
  color: Colors.white,
  fontSize: 24,
  fontWeight: FontWeight.bold,
);
```

基本的なレイアウト操作の実行

次の例は、最も一般的な UI レイアウトタスクを実行する方法を示しています。

テキストのスタイルと配置

CSS のフォントスタイル、サイズ、その他のテキスト属性フォントと色のプロパティを持つハンドルは個別ですのプロパティTextStyleの子Textウィジェット。

テキストを整列させるために使用される CSS の text-align プロパティの場合、 textAlign プロパティがありますTextウィジェット。

HTML と Flutter の両方で、子要素またはウィジェットデフォルトでは、左上に固定されています。

<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Georgia;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: const Text(
    'Lorem ipsum',
    style: TextStyle(
      fontFamily: 'Georgia',
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
    
    textAlign: TextAlign.center, 
  ),
);

背景色の設定

Flutter では、背景色を設定します。color財産またはdecorationの財産Container。ただし、両方を指定することはできません。その結果、背景色の上に装飾が描画されます。のcolorプロパティを優先する必要があります背景が単色の場合。グラデーションや画像などのその他の場合は、使用decoration財産。

CSS の例では、マテリアルカラーパレットに相当する 16 進カラーを使用しています。

<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);

final container = Container(
  // grey box
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);

コンポーネントのセンタリング

あCenterウィジェットはその子を水平方向に中央に配置しますそして縦方向に。

CSS で同様の効果を実現するには、親要素でフレックスのいずれかを使用します。またはテーブルセルの表示動作。このページの例では、フレックスを示しています。行動。

<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Text(
      'Lorem ipsum',
      style: bold24Roboto,
    ),
  ),
);

コンテナの幅の設定

幅を指定するにはContainerウィジェット、それを使用してくださいwidth財産。これは、CSS の max-width プロパティとは異なり、固定幅です。コンテナの幅を最大値まで調整します。 Flutter でそのエフェクトを模倣するには、使用constraintsコンテナのプロパティ。新しいを作成しますBoxConstraintsウィジェット付きminWidthまたmaxWidth。

ネストされたコンテナの場合、親の幅が子の幅より小さい場合、子コンテナは親コンテナに合わせてサイズを調整します。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    width: 100%;
    max-width: 240px;
}

final container = Container(
  // grey box
  width: 320,
  
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      width: 240,
      // max-width is 240
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

位置とサイズを操作する

次の例は、より複雑な操作を実行する方法を示しています。ウィジェットの位置、サイズ、背景。

絶対位置の設定

デフォルトでは、ウィジェットは親に対して相対的に配置されます。

ウィジェットの絶対位置を X-Y 座標として指定するには、にネストしますPositionedウィジェット、つまり、順番に、Stackウィジェット。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    position: relative;
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    position: absolute;
    top: 24px;
    left: 24px;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Stack(
    children: [
      Positioned(
        // red box
        left: 24,
        top: 24,
        
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          child: Text(
            'Lorem ipsum',
            style: bold24Roboto,
          ),
        ),
      ),
    ],
  ),
);

回転部品

ウィジェットを回転するには、ウィジェットをネストします。Transformウィジェット。使用Transformウィジェットのalignmentとoriginプロパティ変換の原点 (支点) を相対的および絶対的に指定するには、それぞれ。

ウィジェットが Z 軸上で回転する単純な 2D 回転の場合、新しいを作成しますMatrix4アイデンティティオブジェクトそしてそれを使用してくださいrotateZ()回転係数を指定する方法ラジアン (度 × π / 180) を使用します。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    transform: rotate(15deg);
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()..rotateZ(15 * 3.1415927 / 180),
      child: Container(
        // red box
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        child: Text(
          'Lorem ipsum',
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ),
);

コンポーネントのスケーリング

ウィジェットを拡大または縮小するには、ウィジェットをTransformウィジェット。 Transform ウィジェットを使用するalignmentとoriginプロパティ変換の原点 (支点) を相対的または絶対的に指定するには、それぞれ。

X 軸に沿った単純なスケーリング操作の場合、新しいを作成しますMatrix4アイデンティティオブジェクトそしてそれを使用してくださいscale()倍率を指定するメソッドです。

親ウィジェットを拡大縮小すると、その子ウィジェットはそれに応じてスケーリングされます。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    transform: scale(1.5);
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()..scale(1.5),
      child: Container(
        // red box
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        child: Text(
          'Lorem ipsum',
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ),
);

線形グラデーションの適用

ウィジェットの背景に線形グラデーションを適用するには、にネストしますContainerウィジェット。次に、Containerウィジェットのdecorationを作成するプロパティBoxDecoration対象にして使用するBoxDecorationのgradient背景の塗りつぶしを変換するプロパティ。

グラデーションの「角度」は、Alignment (x, y) の値に基づいています。

開始と終了の x 値が等しい場合、勾配は垂直 (0° | 180°) です。
開始と終了の y 値が等しい場合、勾配は水平 (90° | 270°) です。

縦方向のグラデーション

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment(0.0, 0.6),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),
      
      padding: const EdgeInsets.all(16),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

水平方向のグラデーション

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment(-1.0, 0.0),
          end: Alignment(0.6, 0.0),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),
      
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

形状の操作

次の例は、形状を作成およびカスタマイズする方法を示しています。

角を丸くする

長方形の角を丸くするには、使用borderRadiusの財産BoxDecoration物体。新しいを作成しますBorderRadius各角を丸める半径を指定するオブジェクト。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    border-radius: 8px;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red circle
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
        borderRadius: const BorderRadius.all(
          Radius.circular(8),
        ), 
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

ボックスの影を追加する

CSS では影のオフセットとぼかしを省略形で指定できます。 box-shadow プロパティを使用します。この例では 2 つのボックスシャドウを示しています。プロパティ付き:

xOffset: 0px, yOffset: 2px, blur: 4px, color: black @80% alpha
xOffset: 0px, yOffset: 06x, blur: 20px, color: black @50% alpha

Flutter では、各プロパティと値は個別に指定されます。使用boxShadowの財産BoxDecorationのリストを作成するにはBoxShadowウィジェット。 1 つまたは複数を定義できますBoxShadow積み重ねることができるウィジェット影の深さ、色などをカスタマイズします。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
              0 6px 20px rgba(0, 0, 0, 0.5);
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  margin: const EdgeInsets.only(bottom: 16),
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
        boxShadow: const <BoxShadow>[
          BoxShadow(
            color: Color(0xcc000000),
            offset: Offset(0, 2),
            blurRadius: 4,
          ),
          BoxShadow(
            color: Color(0x80000000),
            offset: Offset(0, 6),
            blurRadius: 20,
          ),
        ], 
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

円と楕円を作る

CSS で円を作成するには、長方形の 4 つの辺すべてに対して 50% の境界半径、あるのに基本的な形。

このアプローチはサポートされていますが、とともにborderRadiusの財産BoxDecoration、 Flutter が提供するのは、shape財産とBoxShape列挙型この目的のために。

<div class="grey-box">
  <div class="red-circle">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-circle {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    text-align: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red circle
      decoration: BoxDecoration(
        color: Colors.red[400],
        shape: BoxShape.circle, 
      ),
      padding: const EdgeInsets.all(16),
      width: 160,
      height: 160,
      
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
        textAlign: TextAlign.center, 
      ),
    ),
  ),
);

テキストの操作

次の例は、フォントなどを指定する方法を示しています。テキスト属性。テキスト文字列を変換する方法も示します。間隔をカスタマイズし、抜粋を作成します。

テキストの間隔を調整する

CSSでは空白の量を指定します。長さの値を指定して各文字または単語の間を区切るそれぞれ、letter-spacing プロパティと word-spacing プロパティです。スペースの量は、px、pt、cm、em などで指定できます。

Flutter では、空白を論理ピクセルとして指定します。 (負の値も許可されます) のためにletterSpacingとwordSpacingプロパティのTextStyleの子Textウィジェット。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    letter-spacing: 4px;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: const Text(
        'Lorem ipsum',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.w900,
          letterSpacing: 4, 
        ),
      ),
    ),
  ),
);

インライン書式設定の変更

あTextウィジェットでテキストを表示できますいくつかの書式特性を備えています。複数のスタイルを使用するテキストを表示するには (この例では、強調された単一の単語)、使うRichText代わりにウィジェット。これはtextプロパティでは 1 つ以上を指定できますTextSpan個別にスタイル設定できるオブジェクト。

次の例では、「Lorem」はTextSpanデフォルトの（継承された）テキストスタイルを使用して、「イプサム」は別冊にありますTextSpanカスタムスタイルで。

<div class="grey-box">
  <div class="red-box">
    Lorem <em>ipsum</em>
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
}
.red-box em {
    font: 300 48px Roboto;
    font-style: italic;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: RichText(
        text: TextSpan(
          style: bold24Roboto,
          children: const <TextSpan>[
            TextSpan(text: 'Lorem '),
            TextSpan(
              text: 'ipsum',
              style: TextStyle(
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48,
              ),
            ),
          ],
        ),
      ), 
    ),
  ),
);

テキストの抜粋を作成する

抜粋では、段落内のテキストの最初の行が表示されます。多くの場合省略記号を使用して、オーバーフローテキストを処理します。

Flutter では、maxLinesの財産Textウィジェット抜粋に含める行数を指定するには、そしてそのoverflowオーバーフローテキストを処理するためのプロパティ。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum dolor sit amet, consec etur
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: Text(
        'Lorem ipsum dolor sit amet, consec etur',
        style: bold24Roboto,
        overflow: TextOverflow.ellipsis,
        maxLines: 1, 
      ),
    ),
  ),
);