This article has been authorized to be published and reprinted exclusively by the wechat official account YYGeeker, please indicate the source

AnimatedDefaultTextStyle

1, the introduction of

  • AnimatedDefaultTextStyleControl represents an animated control with varying text styles
  • AnimatedDefaultTextStyleBy modifying the style property of the component, the system will automatically animate it to the new style

constructors

AnimatedDefaultTextStyle({
    Key key,
    @required this.child,
    @required this.style,
    this.textAlign,
    this.softWrap = true.this.overflow = TextOverflow.clip,
    this.maxLines,
    Curve curve = Curves.linear,
    @required Duration duration,
    Duration reverseDuration,
})
Copy the code
  • Child: A child control, usually a Text component
  • Style: The style of the child control used for animation changes
  • TextAlign: Alignment of all newline fonts if the text is longer than 1 line. It can be left or right
  • SoftWrap: Whether text should be wrapped at soft newlines. Soft and hard newlines are word usage
  • Overflow: Clipping of areas that exceed the number of lines of text
  • MaxLines: Maximum number of lines of text, default is 1
  • Curve: Animation interpolator
  • Duration: animation playback duration
  • ReverseDuration: Indicates the playback duration of the backward animation

Example 3,

Switching styles is controlled by the _isSelected value

AnimatedDefaultTextStyle(
  softWrap: false,
  textAlign: TextAlign.right,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  curve: Curves.linear,
  duration: Duration(seconds: 1),
  child: Text("Flutter message you!!!"),
  style: _isSelected
      ? TextStyle(
          fontSize: 10.0,
          color: Colors.red,
          fontWeight: FontWeight.bold,
        )
      : TextStyle(
          fontSize: 50.0,
          color: Colors.black,
          fontWeight: FontWeight.w300,
        ),
),
Copy the code

Style switching is controlled by a timer

Timer.periodic(Duration(seconds: 1), (timer) {
  setState(() {
    switch (time % 4) {
      case 0:
        _isSelected = false;
        break;
      case 2:
        _isSelected = true;
        break;
    }
    time++;
  });
});
Copy the code

AnimatedListState/AnimatedList

1, the introduction of

  • AnimatedListStateControl represents a list control with an animation
  • AnimatedListStateControl asAnimatedListControl key to control list animation and add and delete operations

constructors

const AnimatedList({
    Key key,
    @required this.itemBuilder,
    this.initialItemCount = 0.this.scrollDirection = Axis.vertical,
    this.reverse = false.this.controller,
    this.primary,
    this.physics,
    this.shrinkWrap = false.this.padding,
})
Copy the code
  • ItemBuilder: The builder of list items
  • InitialItemCount: Number of initialized items in the list
  • ScrollDirection: indicates the scrolling direction
  • Reverse: Indicates whether to reverse
  • Controller: scroll controller
  • Primary: Whether this view scrolls to the top when the user clicks on the status bar. IOS only, supported by default
  • Physics: Controls the user’s scrolling view interaction
    • AlwaysScrollableScrollPhysics: always scrollable list
    • PageScrollPhysics: Slide a list of pages, generally used for the slide effect of the PageView control, sliding to the end of a large popup
    • ClampingScrollPhysics: No rebound effect when scrolling
    • NeverScrollableScrollPhysics: even if the content range of list will not slide
    • BouncingScrollPhysics: BouncingScrollPhysics BouncingScrollPhysics BouncingScrollPhysics BouncingScrollPhysics
    • FixedExtentScrollPhysics: only scroll to children without any offset, must be used together with the use of FixedExtentScrollController scrollable object
  • ShrinkWrap: Whether to set the length of the ListView based on the total length of the child widgets
  • Padding: Inner margin of the parent control

Example 3,

Click the plus sign to randomly generate strings to add to the list, and click the delete icon of the item to delete the list

class WeWidgetState extends State<WeWidget> {
  var data = <String>[];
  var tween = Tween<Offset>(begin: Offset(1.0), end: Offset(0.0));
  final animatedKey = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('day19'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          var str = Random().nextInt(1000).toString();
          data.add(str);
          var index = data.lastIndexOf(str);
          animatedKey.currentState.insertItem(index);
        },
        child: Icon(Icons.add),
      ),
      body: AnimatedList(
        physics: BouncingScrollPhysics(),
        padding: EdgeInsets.all(12.0),
        scrollDirection: Axis.vertical,
        primary: true,
        reverse: false,
        shrinkWrap: false,
        key: animatedKey,
        initialItemCount: data.length,
        itemBuilder: (context, int index, Animation<double> animation) {
          returnanimationListItem(data[index], animation); },),); }Widget animationListItem(String str, animation) {
    return SlideTransition(
      position: animation.drive(tween),
      child: listItem(str),
    );
  }

  Widget listItem(String str) {
    return ListTile(
      title: Text('$str', style: TextStyle(fontSize: 30)), trailing: IconButton( icon: Icon(Icons.delete_forever), onPressed: () { var index = data.indexOf(str); data.remove(str); animatedKey.currentState.removeItem( index, (context, animation) => animationListItem(str, animation)); },),); }}Copy the code

AnimatedModalBarrier

1, the introduction of

  • AnimatedModalBarrierControl represents an animated control with color value changes
  • AnimatedModalBarrierControl prevents the user from interacting with the widget behind itself, and color animations can be used for transitions
  • AnimatedModalBarrierControl for example, when a dialog box appears on the screen, the page below the dialog box is usually removedModalBarrierdim

constructors

const AnimatedModalBarrier({
    Key key,
    Animation<Color> color,
    this.dismissible = true.this.semanticsLabel,
    this.barrierSemanticsDismissible,
})
Copy the code
  • Color: Color value animation changes
  • Dismissible: Whether or not to touch the presentModalBarrierThe current route will pop up, with click the event to pop up the route
  • SemanticsLabel: indicates the semantic label
  • Whether to include barrierSemanticsDismissible: semantic treeModalBarrierThe semantic

Example 3,

Widget _buildColumn(a) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        child: AnimatedModalBarrier(
          semanticsLabel: "StackBarrier",
          barrierSemanticsDismissible: true,
          dismissible: true,
          color: _animation,
        ),
      ),
    );
}
Copy the code

AnimatedOpacity

1, the introduction of

  • AnimatedOpacityControl represents an animated control with transparency changes

constructors

const AnimatedOpacity({
    Key key,
    this.child,
    @required this.opacity,
    Curve curve = Curves.linear,
    @required Duration duration,
})
Copy the code
  • Child: child control
  • Opacity: opacity animation change value
  • Curve: Interpolator for animation
  • Duration: indicates the duration of the animation

Example 3,

Change transparency by timer

class WeWidgetState extends State<WeWidget> {
  WeWidgetState() {
    Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        switch (time % 2) {
          case 0:
            _opacity = 0.3;
            break;
          case 1:
            _opacity = 1.0;
            break;
        }
        time++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day21"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn(a) {
    return Center(
      child: AnimatedOpacity(
        curve: Curves.fastOutSlowIn,
        opacity: _opacity,
        duration: Duration(seconds: 1),
        child: FlutterLogo(
          style: FlutterLogoStyle.horizontal,
          size: 200,),),); }}Copy the code

AnimatedPhysicalModel

1, the introduction of

  • AnimatedPhysicalModelControl represents a control with a shaded background animation

constructors

const AnimatedPhysicalModel({
    Key key,
    @required this.child,
    @required this.shape,
    this.clipBehavior = Clip.none,
    this.borderRadius = BorderRadius.zero,
    @required this.elevation,
    @required this.color,
    this.animateColor = true,
    @required this.shadowColor,
    this.animateShadowColor = true,
    Curve curve = Curves.linear,
    @required Duration duration,
})
Copy the code
  • Child: child control
  • Shape: Shadow shape
  • ClipBehavior: Clipping of shadows
    • Clip.none: Indicates no mode
    • Clip. HardEdge: Slightly faster clipping speed, but prone to distortion and jagged
    • Clip.antiAlias: clipping edge anti-aliasing for smoother clipping. This mode is faster than antiAliasWithSaveLayer but slower than hardEdge
    • Clip. AntiAliasWithSaveLayer: after cutting with anti-aliasing properties and assign the screen buffer, all subsequent operations in the buffer
  • BorderRadius: Border of the background
  • Elevation: Depth of the shadow color value
  • Color: background color
  • AnimateColor: Whether the background color is animated
  • ShadowColor: Animation value of the shadow
  • AnimateShadowColor: Whether shadows are animated
  • Curve: Interpolator for animation
  • Duration: indicates the duration of the animation

Example 3,

Widget _buildColumn(a) {
    return Center(
      child: AnimatedPhysicalModel(
        curve: Curves.fastOutSlowIn,
        color: Colors.grey.withOpacity(0.2),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        borderRadius: BorderRadius.circular(12.0),
        animateColor: true,
        animateShadowColor: true,
        shape: BoxShape.rectangle,
        shadowColor: _shadowColor,
        elevation: 20.0,
        duration: Duration(seconds: 1),
        child: FlutterLogo(
          style: FlutterLogoStyle.horizontal,
          size: 200,),),); }Copy the code

AnimatedPositioned

1, the introduction of

  • AnimatedPositionedControl represents a control with a position change animation

constructors

const AnimatedPositioned({
    Key key,
    @required this.child,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    Curve curve = Curves.linear,
    @required Duration duration,
})
Copy the code
  • Child: child control
  • Left: left distance
  • Top: top distance
  • Right: distance to the right
  • -Leonard: Bottom distance
  • Width: indicates the width of the control
  • Height: Height of the control
  • Curve: Interpolator for animation
  • Duration: indicates the duration of the animation

Example 3,

Animations are played by changing the position and width of the upper left corner

class WeWidgetState extends State<WeWidget> {
  WeWidgetState() {
    Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        switch (time % 2) {
          case 0:
            _width = 100.0;
            break;
          case 1:
            _width = 200.0;
            break;
        }
        time++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day23"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn(a) {
    return Stack(
      children: <Widget>[
        AnimatedPositioned(
          curve: Curves.fastOutSlowIn,
          width: _width,
          height: _width,
          top: _width,
          left: _width,
          duration: Duration(seconds: 1),
          child: FlutterLogo(
            style: FlutterLogoStyle.horizontal,
            size: 200[, [, [, [, [, [. }}Copy the code

AnimatedSize

1, the introduction of

  • AnimatedSizeControl represents a control with a sizing animation

constructors

const AnimatedSize({
    Key key,
    Widget child,
    this.alignment = Alignment.center,
    this.curve = Curves.linear,
    @required this.duration,
    this.reverseDuration,
    @required this.vsync,
})
Copy the code
  • Child: child control
  • Alignment: Indicates the alignment of child controls
  • Curve: Interpolator for animation
  • Duration: indicates the duration of the animation
  • ReverseDuration: indicates the duration of the inverted animation
  • Vsync: indicates whether vSYNC is enabled

Example 3,

class WeWidgetState extends State<WeWidget>
    with SingleTickerProviderStateMixin {
  WeWidgetState() {
    Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        switch (time % 2) {
          case 0:
            _width = 100.0;
            break;
          case 1:
            _width = 200.0;
            break;
        }
        time++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day24"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn(a) {
    return Center(
      child: AnimatedSize(
        alignment: Alignment.center,
        curve: Curves.fastOutSlowIn,
        vsync: this,
        duration: Duration(seconds: 1),
        reverseDuration: Duration(seconds: 2), child: FlutterLogo( style: FlutterLogoStyle.horizontal, size: _width, ), ), ); }}Copy the code

The author



Hensen_