A detailed overview of Flutter Duration

Farmers in yards world, beautiful application experience, from the programmer for the processing of detail, and self requirements state, agriculture in the yard a member of the young people is busy, every day, every week, can leave some footprints, is the creation of content, there is a persistent, is I don’t know why, if you lost, might as well to Chou Chou code track of farmers.

• Beautiful musical beats take you through the coding process of this effect
• Insist on every day, is the pursuit of every ideal youth
• Follow in the footsteps of young people, and maybe your answer is right here
• Take a look here if you’re confused

1 What is Duration?

Duration: 1 day, 1 hour, 1 minute, 1 second, 100 milliseconds, 100 nanoseconds

How to use Duration?

Create directly from the constructor. All parameters are optional, as described below:

  const Duration({int days = 0, / / dayint hours = 0, / / hourint minutes = 0, / / minutesint seconds = 0, / / SECint milliseconds = 0, / / msint microseconds = 0})/ / nanoseconds
Copy the code

2.1 Duration is often used in conjunction with a Timer

For example, create a timer with a delay of 2 seconds

    // defined by milliseconds
    Duration duration = new Duration(milliseconds: 2000);
    // By second definition
    Duration duration2 = new Duration(seconds: 2);
    
    // Create a timer
    Timer timer = Timer(duration, (){
      // delay callback
    });
Copy the code

2.2 Duration can also be used in conjunction with Future

For example, create a timer with a delay of 2 seconds

    // By second definition
    Duration duration = new Duration(seconds: 2);

    Future.delayed(duration,(){
      // delay callback
    });
Copy the code

2.3 Duration can also be used with the AnimatedXXX family of components

For example, transparency switches dynamically in 1200 milliseconds

  double _opacity = 1.0;
  Widget buildControllerWidget(a) {
    // Animation transition transparency component
    return AnimatedOpacity(
      // Transition time
      duration: Duration(milliseconds: 1200), opacity: _opacity, child:... ,); }Copy the code

Duration is used in the animated series

Such as defining a time period in an animation controller

class _TestState extends State
    with TickerProviderStateMixin {
  // Animation controller
  AnimationController _ationController;
    // page initialization method
  @override
  void initState(a) {
    super.initState();
    // Initialize the springback execution time to 400 milliseconds
    _ationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400)); }Copy the code

2.5 Duration is also used for custom routes

  /// Open the page from bottom up
  ///[isReplace] whether to replace the current one
  ///[opaque] Indicates whether to open a new page in background transparency mode
  ///[dismissCallBack] closes the page callback
  static void openPageFromBottom(BuildContext context, Widget page,
      {bool isReplace = false,
      bool opaque = true,
      Function(dynamic value) dismissCallBack}) {
    // Customize the route
    PageRouteBuilder pageRouteBuilder = new PageRouteBuilder(
        opaque: opaque,
        // Page build
        pageBuilder: (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation) {
          // Target page
          return page;
        },
        // Open the page transition time
        transitionDuration: Duration(milliseconds: 600),
        // Close the page transition time
        reverseTransitionDuration: Duration(milliseconds: 400),
        // Transition animation
        transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget child,
        ) {
          // Pan transition animation
          return SlideTransition(
            // Shift from position (-1.0, 0.0) to (0.0, 0.0)
            position: Tween(
              begin: Offset(0.0.1.0),
              end: Offset(0.0.0.0),
            ).animate(
              CurvedAnimation(
                parent: animation,
                curve: Curves.easeInOut,
              ),
            ),
            child: child,
          );
        });
    if (isReplace) {
      Navigator.of(context).pushReplacement(pageRouteBuilder);
    } else {
      Navigator.of(context).push(pageRouteBuilder).then((value) {
        if(dismissCallBack ! =null) { dismissCallBack(value); }}); }}Copy the code