Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.

important news

• NetEase Cloud [Fun Big Front-End] Supporting Course

• EDU supporting tutorial

• A series of articles on the accumulation of bits and pieces developed by Flutter

AnimatedDefaultTextStyle switches the display style of the text by means of animation transition, as shown in the figure below. When the switch style button is clicked, the displayed text style will be switched by means of animation transition.

The core code of this effect is the animation effect transition realized by AnimatedDefaultTextStyle, the code is as follows:

AnimatedDefaultTextStyle buildAnimatedDefaultTextStyle ( )  { 
  return  AnimatedDefaultTextStyle ( 
    ///Set the text style in Text 
    ///When the style changes, it will transition and switch in an animated way 
    style : isSelected
         ?  TextStyle ( 
            fontSize :  50 , color : Colors . red , fontWeight : FontWeight . bold ) 
        :  TextStyle ( 
            fontSize :  24.0 , color : Colors .black , fontWeight : FontWeight . w100 ) , 
    /// animation switching time 
    duration :  const  Duration ( milliseconds :  200 ) , 
    /// animation execution interpolator 
    curve : Curves . bounceInOut , 
    /// text alignment 
    textAlign : TextAlign . start , 
    ///Whether the text should wrap at the soft line break 
    softWrap :  true , 
    ///The clipping method of the area that exceeds the number of text lines 
    ///The setting is set to ellipsis 
    overflow : TextOverflow .ellipsis , 
    ///The maximum number of displayed lines 
    maxLines :  1 , 
    ///Whenever the style is modified to trigger the animation 
    ///Callback for the end of animation execution 
    onEnd :  ( )  { 
      print ( "End of animation execution" ) ; 
    } ,

    ///Text component 
    child :  Text ( "Hello, Flutter" ) , 
  ) ; 
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

Dynamically modify the value of isSelected through a button to trigger the transition animation transition effect of modifying the text style. The complete code is as follows:

class AnimatedTextStylePage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<AnimatedTextStylePage> {
  @override
  Widget build(BuildContext context) {
    return buildBodyFunction();
  }

  bool isSelected = false;

  ///5.8 /lib/code4/main_data404.dart 
  /// Text display component Text 
  Widget buildBodyFunction ( )  { 
    return  Scaffold ( 
      appBar :  AppBar ( 
        title :  Text ( "Animation Style" ) , 
      ) , 
      body :  Container ( 
        padding : EdgeInsets .all ( 16 ) , 
        child : Column ( 
          children : < Widget > [ _  
            ///Animated style components 
            buildAnimatedDefaultTextStyle ( ) , 
            SizedBox ( 
              height :  55 , 
            ) , 
            FlatButton ( 
              child :  Text ( "toggle style" ) , 
              onPressed :  ( )  { 
                setState ( ( )  { 
                  isSelected =  ! isSelected ; 
                } ) ; 
              } , 
            ) 
          ] , 
        ) , 
      ) ,
    ) ; 
  } 
  ///Omit buildAnimatedDefaultTextStyle method code 
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45