Common Tips for Flutter Business Development (Style Layout)

Correspondence between flutter and css in shadow style

The shadow as shown in the figure below

CSS style given by UI

width: 75px;
height: 75px;
background-color: rgba(255, 255, 255, 1);
border-radius: 4px;
box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08);

flutter style layout

Container(
      constraints: BoxConstraints.tightFor(width: 75, height: 75),
      margin: EdgeInsets.only(left: 0.5, right: 0.5, top: 0.5, bottom: 3),
          //阴影布局
      decoration: BoxDecoration(
        color: WBColors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.08),
            offset: Offset(0, 0.5),
            blurRadius: 5,
            spreadRadius: 0
          )
        ]
      ),
      alignment: Alignment.center,
      child: ...,
    )

Correspondence

Attributes	css（box-shadow）	flutter（boxShadow）
offset	The first two values	offset: Offset(0, 0.5)
blurRadius	Third value	blurRadius: 5,
spreadRadius	Fourth value	spreadRadius: 0
color	rgba(0, 0, 0, 0.08)	color: Color.fromRGBO(0, 0, 0, 0.08)

Text box border processing

UI as below

The CSS styles given by the UI are as follows

width: 335px;
height: 138px;
border: 0.5px solid rgba(230, 230, 230, 1);
border-radius: 10px;

flutter processing is as follows

TextField(
  keyboardType: TextInputType.multiline,
  controller: textareaController,
  maxLines: 7,
  maxLength: 200,
  decoration: InputDecoration(
      //H5内的placeholder占位符
      hintText: '点击输入客户姓名...',
      //文字内边框距离
      contentPadding: 14.0,
      //未选中时候的颜色
      enabledBorder: OutlineInputBorder( 
        borderRadius: BorderRadius.circular(5.0),
        borderSide: BorderSide(color: Color(0xFFEAEAEA), width: 0.5),
      ),
      //选中时外边框颜色
      focusedBorder: OutlineInputBorder( 
        borderRadius: BorderRadius.circular(5.0),
        borderSide: BorderSide(color: Color(0xFFEAEAEA), width: 0.5),
      ),
      hintStyle: TextStyle(
        fontSize: 14,
        fontFamily: 'PingFangSC-Medium',
        color: Color(0xFFCCCCCC),
      ),
      counterText: '',
  ),
  onChanged: (event) {
    ///监听输入框 回传输入框的值
    model.callback(event);
  } ,
)

This kind of code that can often be done with one line of CSS Flutter requires complex style processing and is sometimes prone to errors. Flutter defaults to the blue border of the system color. It is difficult to modify the border color without finding the right API.

Gradient button layout

UI as shown below

UI given css style

width: 335px;
height: 46px;
background: linear-gradient(98deg, rgba(242, 82, 40, 1) 0%,rgba(242, 82, 40, 1) 14.000000000000002%,rgba(252, 175, 60, 1) 94%,rgba(252, 175, 60, 1) 100%);
border-radius: 23px;

flutter layout style

Container(
  height: 46,
  width: UIScreen.screenWidth()-30,
  decoration: BoxDecoration(
    gradient: LinearGradient(colors: [
      Color(0xFFF25228),
      Color(0xFFFCAF3C),
    ], begin: FractionalOffset(0, 1), end: FractionalOffset(1, 0)),
    borderRadius: BorderRadius.circular(23),
  ),
  child: FlatButton(
      onPressed: (){
        ///点击按钮关闭弹窗
        callback();
      },
      child: Text(
        '我已确认车况  立即取车',
        style: TextStyle(
            color: Color(0xFFFFFFFF),
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 15,
            fontWeight: FontWeight.w700
        ),
      )
  ),
)

In H5, one line of style code is done, but in Flutter, you need to use the decoration property of the Container component to set the background gradient.

Remove the drop-down water ripple effect of the Android scrolling component

As shown in the figure above, if some businesses use the SingleChildScrollView scrolling component in the middle of the page, the above water ripple will appear in the drop-down. In my opinion, it is very ugly and affects the page look and feel. Then how to remove it, the specific operations are as follows:

import 'package:flutter/material.dart';
///自定义一个 NoShadowScrollBehavior 去除Android的水波纹效果
class NoShadowScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return child;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return GlowingOverscrollIndicator(
          child: child,
          //不显示头部水波纹
          showLeading: false,
          //不显示尾部水波纹
          showTrailing: false,
          axisDirection: axisDirection,
          color: Theme.of(context).accentColor,
        );
    }
    return null;
  }
}
//如下调用
ScrollConfiguration(
    behavior: NoShadowScrollBehavior(),
    child: SingleChildScrollView(
      // physics: NeverScrollableScrollPhysics(),
      child: Column(
        children: <Widget>[
          buildButtonRadio(context),
          buildCondition(context),
          SizedBox(height: 100,)
        ],
      ),
    )
);