Inscription – sword tianya, start from your drip accumulation, and will keep improving.

Flutter is Google’s latest mobile development framework.

[X1] The daily reminder of wechat official account is accumulated at any time

【 X2 】 Various series of free open source video tutorials focus on you won’t get lost

【 X3 】 series article millions of Demo copy and paste use at any time

The schemes available for asynchronous communication in Flutter are as follows:

  • The Provider is being published
  • ValueNotifier (Click for details)
  • Stream: the use of StreamController details | StreamBuilder components using the combination of | StreamBuilder realize the countdown schedule circle (this paper)
  • EventBus is Posting
  • Bloc is on the way

This article covers the basic use of StreamBuilder and Demo functionality for timers implemented through StreamBuilder

The final results of this article are as follows:This effect is often used in APP’s opening screen advertising countdown page function in application development.

Create a StreamController with a single subscription and use a WidgetsBinding to listen for the Widget to be drawn and start a Timer as follows:

/// count down through Stream
/ / / the countdown
class TestTimeProgressIndicatorPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState(a) {
    return_TestABPageState(); }}class _TestABPageState extends State {
  /// single subscription stream
  StreamController<double> _streamController = StreamController();
  / / / timer
  Timer _timer;
  /// Count down to 6 seconds
  double totalTimeNumber = 6000;
  /// The current time
  double currentTimeNumber = 6000;

  @override
  void initState(a) {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
      /// the current page after drawing the first frame callback
      // start the timer here
      startTimer();
    });
    
  }


  @override
  void dispose(a) {
    super.dispose();
    / / / closed_streamController.close(); _timer.cancel(); }... . }Copy the code

Once the cancel method has been executed, it cannot be repeated again, so it is encapsulated as a method block for multiple use. The code for creating the Timer is as follows:

 void startTimer(a) {
   /// the interval is 100 milliseconds
   _timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
     // subtract 100 every time at an interval of 100 milliseconds
     currentTimeNumber -= 100;

     // Cancel the timer if the count is complete
     if (currentTimeNumber <= 0) {
       _timer.cancel();
       currentTimeNumber = 0;
     }

     /// Stream data update
     _streamController.add(currentTimeNumber);
   });
 }

Copy the code

The Scaffold Scaffold component is used to build the main structure of the page as follows:

@override
 Widget build(BuildContext context) {
   /// page body scaffolding
   return Scaffold(
     appBar: AppBar(
       title: Text("Test Stream"),
     ),
     body: Column(
       children: [
         
         /// Circle part
         Container(
           child: buildStreamBuilder(),
           margin: EdgeInsets.only(top: 20, left: 20),),/ / / intervals
         SizedBox(
           height: 40,),/// Control button of Demo
         OutlineButton(
           child: Text('Start the countdown'),
           onPressed: () {
             currentTimeNumber = totalTimeNumber;
             if(! _timer.isActive) { startTimer(); }},)],),); }Copy the code

StreamBuilder to refresh the progress and text display in real time:

 /// Listen on the Stream and update the contents of the Text every time the value changes
 StreamBuilder<double> buildStreamBuilder(a) {
   return StreamBuilder<double> (/ / / binding stream
     stream: _streamController.stream,
     /// Default data
     initialData: 0./// build the UI for binding data
     builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
       return Stack(
         /// center the child widgets
         alignment: Alignment.center,
         children: [
           /// The text displayed in the middle
           Text(
             (snapshot.data / 1000).toStringAsFixed(0),
             style: TextStyle(fontSize: 22, color: Colors.blue),
           ),
           /// circle the progress
           CircularProgressIndicator(
             value: 1.0- snapshot.data / totalTimeNumber,) ], ); }); }Copy the code

The debugging effect is as follows:

The completion of

To xiaobian character, to achieve millions of Demo copy and paste at any time is certainly the need for source code

  • Github source click to see more details

Of course, with the character of xiaobian, there must be a video recording, currently recording, you can pay attention to the watermelon video – the early young people will be uploaded later