Vue.js style layout Flutter business development common skills

Correspondence between flutter and css in shadow style

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),
          //Shadow layout 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

property	css (box-shadow)	flutter (boxShadow)
offset	The first two values	offset: Offset(0, 0.5)
blurRadius	The third value	blurRadius: 5,
spreadRadius	The fourth value	spreadRadius: 0
color	rgba(0, 0, 0, 0.08)	color: Color.fromRGBO(0, 0, 0, 0.08)

Text box border processing

The css style given by UI is as follows

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

Flutter handles it as follows

TextField(
  keyboardType: TextInputType.multiline,
  controller: textareaController,
  maxLines: 7,
  maxLength: 200,
  decoration: InputDecoration(
      // placeholder in H5 hintText: 'Click to enter the customer's name...',
      //Text inner border distance contentPadding: 14.0,
      //Unselected color enabledBorder: OutlineInputBorder( 
        borderRadius: BorderRadius.circular(5.0),
        borderSide: BorderSide(color: Color(0xFFEAEAEA), width: 0.5),
      ),
      //Outer border color when selected 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) {
    ///Listen to the input box and return the value of the input box model.callback(event);
  } ,
)

This kind of code that can usually be done with one line of CSS requires complex style processing in Flutter, which is sometimes prone to errors. By default, Flutter uses the system blue border. It is difficult to change the border color without finding the right API.

Gradient Button Layout

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: (){
        ///Click the button to close the pop-up window callback();
      },
      child: Text(
        'I have confirmed the condition of the car and will pick it up immediately',
        style: TextStyle(
            color: Color(0xFFFFFFFF),
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 15,
            fontWeight: FontWeight.w700
        ),
      )
  ),
)

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

Remove the water ripple effect when scrolling down the Android scroll component

If some of our businesses use the SingleChildScrollView scrolling component in the middle of the page, water ripples will appear when you pull down. In my opinion, it is very ugly and affects the appearance of the page. So how to remove it? The specific operations are as follows:

import 'package:flutter/material.dart';
///Customize a NoShadowScrollBehavior to remove the water ripple effect of 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,
          //Do not display the head water ripples showLeading: false,
          //Do not display the trailing water ripples showTrailing: false,
          axisDirection: axisDirection,
          color: Theme.of(context).accentColor,
        );
    }
    return null;
  }
}
//Call ScrollConfiguration(
    behavior: NoShadowScrollBehavior(),
    child: SingleChildScrollView(
      // physics: NeverScrollableScrollPhysics(),
      child: Column(
        children: <Widget>[
          buildButtonRadio(context),
          buildCondition(context),
          SizedBox(height: 100,)
        ],
      ),
    )
);

The above is the details of the common techniques for Flutter business development in vue.js style layout. For more information on Flutter business development style layout techniques, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: