This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The use of timers in Flutter

Timer? _timer; int _count = 0; @override void initState() { super.initState(); _timer = Timer. Periodic (Duration(seconds: 1), (Timer) {// Timer callback _count ++; }); } @override void dispose() { if (null ! = _timer && (_timer? .isActive ?? False)) {// Destroy timer _timer? .cancel(); } super.dispose(); Print (' Page destroyed! '); }Copy the code

One of the advantages of a timer in Flutter compared to iOS is that the execution of a timer event is not affected by view drags and does not involve modes. However, it is important to destroy the timer when the page leaves.

Network request class encapsulation

At the beginning, we directly used the three-party framework HTTP to make network requests in the page. The disadvantage here is that if we change the network request framework in the future, all the requests related to the network need to be changed, which will have a great impact on the project. So here we encapsulate a network request class and define our own network request method. Even if we change the three-party framework in the future, we just need to change it in our own network request class, and the rest of the project does not change. Encapsulating network requests is something that iOS and Android projects do as well.

Enum HttpMethod {GET, POST} class HttpManager {// Static Dio? _dioInstance; static Dio? _getDioInstance() { if (null == _dioInstance) { _dioInstance = Dio(); } return _dioInstance; } static Future<Response> get(String url, {Map<String, dynamic>? queryParameters}) async { return await _sendRequest(HttpMethod.GET, url, queryParameters: queryParameters); } static Future<Response> post(String url, {Map<String, dynamic>? queryParameters, dynamic data}) async { return await _sendRequest(HttpMethod.GET, url, queryParameters: queryParameters, data: data); } static Future _sendRequest(HttpMethod method, String url, {Map<String, dynamic>? queryParameters, dynamic data}) async { try { switch(method) { case HttpMethod.GET: return await HttpManager._getDioInstance()? .get(url, queryParameters: queryParameters); case HttpMethod.POST: return await HttpManager._getDioInstance()? .post(url, queryParameters: queryParameters, data: data); Default: throw Exception(' error '); } } on DioError catch(e) { print(e.message); } on Exception catch(e) { print(e.toString()); } return null; }}Copy the code

In the HttpManager class, we define Dio singleton object _dioInstance, and use the singleton method _getDioInstance to get the singleton object. We defined two static methods post and GET, and in both of them we called the private _sendRequest method, The _sendRequest method is passed the enumeration parameter HttpMethod to distinguish between Dio singletons calling GET or POST requests. Note that async must be used in the method and await the return value.

Chat list search box implementation

class SearchCell extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: (){print(' click on the search box '); }, child: Container( height: 45, color: CahtThemColor, padding: EdgeInsets.all(5), child: Stack( alignment: Alignment.center, children: [ Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius. Circular (6.0),),), / / white bottom view Row (mainAxisAlignment: mainAxisAlignment center, children: [Image (Image: AssetImage('images/ magnify B.png '), width: 15, color: color.grey,), Text(' search ', style: TextStyle(fontSize: 15, color: Colors.grey),), ], ), ], ), ), ); }}Copy the code

In the chat page, we can see the search box at the top, which scrolls along with the list, so a good way to implement this is to define the search box as a cell. In fact, the search box only click the event, click after the jump to a new page, so we only need to use widgets to achieve the display of the search box. The search box is composed of a view with a white background, a picture and a text, so we use Stack to realize it. The first element of children is a view with a white background, and the picture and the text are arranged left and right by Row.