Vue.js スタイルレイアウト Flutter ビジネス開発共通スキル

幅: 75px;
高さ: 75px;
背景色: rgba(255, 255, 255, 1);
境界線の半径: 4px;
ボックスの影: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08);

容器（
      制約: BoxConstraints.tightFor(幅: 75, 高さ: 75),
      マージン: EdgeInsets.only(左: 0.5、右: 0.5、上: 0.5、下: 3)、
          // 影のレイアウト装飾: BoxDecoration(
        色: WBColors.white、
        境界半径: 境界半径.circular(8),
        ボックスシャドウ: [
          ボックスシャドウ
            色: Color.fromRGBO(0, 0, 0, 0.08)、
            オフセット: オフセット(0, 0.5)、
            ぼかし半径: 5,
            拡散半径: 0
          ）
        ]
      ）、
      配置: Alignment.center、
      子供： ...、
    ）

幅: 335ピクセル;
高さ: 138px;
境界線: 0.5px 実線 rgba(230, 230, 230, 1);
境界線の半径: 10px;

テキストフィールド(
  キーボードタイプ: TextInputType.multiline、
  コントローラー: textareaController、
  最大行数: 7,
  最大長: 200,
  デコレーション: InputDecoration(
      // H5 ヒントテキストのプレースホルダー: '顧客の名前を入力するにはクリックしてください...',
      //テキストの内側の境界線の距離 contentPadding: 14.0,
      //選択されていない色 enabledBorder: OutlineInputBorder( 
        境界半径: 境界半径.円形(5.0)、
        ボーダーサイド: ボーダーサイド(色: カラー(0xFFEAEAEA), 幅: 0.5),
      ）、
      //選択時の外側の境界線の色 focusedBorder: OutlineInputBorder( 
        境界半径: 境界半径.円形(5.0)、
        ボーダーサイド: ボーダーサイド(色: カラー(0xFFEAEAEA), 幅: 0.5),
      ）、
      ヒントスタイル: テキストスタイル(
        フォントサイズ: 14,
        フォントファミリー: 'PingFangSC-Medium'、
        色: 色(0xFFCCCCCC)、
      ）、
      カウンターテキスト: ''、
  ）、
  onChanged: (イベント) {
    /// 入力ボックスをリッスンし、入力ボックスの値を返します。model.callback(event);
  } 、
）

幅: 335ピクセル;
高さ: 46px;
背景: linear-gradient(98deg, rgba(242, 82, 40, 1) 0%,rgba(242, 82, 40, 1) 14.0000000000000002%,rgba(252, 175, 60, 1) 94%,rgba(252, 175, 60, 1) 100%);
境界線の半径: 23px;

容器（
  高さ: 46,
  幅: UIScreen.screenWidth()-30,
  デコレーション: BoxDecoration(
    グラデーション: LinearGradient(色: [
      色(0xFFF25228)、
      色(0xFFFCAF3C)、
    ]、開始: FractionalOffset(0, 1)、終了: FractionalOffset(1, 0))、
    境界半径: 境界半径.円形(23)、
  ）、
  子: FlatButton(
      押されたとき: (){
        /// ボタンをクリックしてポップアップ ウィンドウを閉じます callback();
      },
      子: テキスト(
        「車の状態を確認しましたので、すぐに引き取りに伺います」
        スタイル: テキストスタイル(
            色: 色(0xFFFFFFFF)、
            フォントファミリー: 'PingFangSC-Semibold'、
            フォントサイズ: 15,
            フォントの太さ: FontWeight.w700
        ）、
      ）
  ）、
）

'package:flutter/material.dart' をインポートします。
/// NoShadowScrollBehavior をカスタマイズして、Android の水の波紋効果を削除します。class NoShadowScrollBehavior extends ScrollBehavior {
  @オーバーライド
  ウィジェットbuildViewportChrome(BuildContextコンテキスト、ウィジェットの子、AxisDirection axisDirection) {
    スイッチ（getPlatform（コンテキスト））{
      TargetPlatform.iOSの場合:
      TargetPlatform.macOSの場合:
        子を返します。
      TargetPlatform.androidの場合:
      TargetPlatform.fuchsiaの場合:
      TargetPlatform.linuxの場合:
      TargetPlatform.windowsの場合:
        GlowingOverscrollIndicator を返します(
          子供: 子供、
          // 頭水波紋を表示しない showLeading: false,
          // 後続の水波紋を表示しない showTrailing: false,
          軸の方向: 軸の方向、
          色: Theme.of(context).accentColor、
        );
    }
    null を返します。
  }
}
//ScrollConfigurationを呼び出す(
    動作: NoShadowScrollBehavior(),
    子: SingleChildScrollView(
      // 物理: NeverScrollableScrollPhysics(),
      子: 列(
        子: <ウィジェット>[
          ボタンラジオを構築(コンテキスト)、
          ビルド条件(コンテキスト)、
          SizedBox(高さ: 100,)
        ]、
      ）、
    ）
);