Connected to. This article mainly encapsulates the refresh loading of the list. There are also some encapsulation of utility classes.

Refresh loading of data

Add a fourth library, also in pubspec.yaml

flutter_easyrefresh: ^2.18.
Copy the code

Importing header files

import 'package:flutter_easyrefresh/easy_refresh.dart';
Copy the code

Start with a simple, basic effect. If you don’t have a specially designed project, use this

EasyRefreshController _controller = EasyRefreshController();
int count = 10;

@override
  void initState() {
    super.initState();
    EasyRefresh.defaultHeader = ClassicalHeader(
      enableInfiniteRefresh: false,
      refreshText: 'Refresh down',
      refreshReadyText: 'It's falling.',
      refreshingText: 'Refreshing',
      refreshedText: 'ok',
      refreshFailedText: 'Load failed',
      noMoreText: 'No more data',
      infoText: "Last Update at 14:55",); EasyRefresh.defaultFooter = ClassicalFooter( enableInfiniteLoad: false, loadText:'load up',
      loadReadyText: 'Ready to load data',
      loadingText: 'Loading',
      loadedText: 'ok',
      loadFailedText: 'Load failed',
      noMoreText: 'I have my limits.',
      infoText: 'Last Update at 14:55',); } EasyRefresh( controller: _controller, onRefresh: ()async {},
  onLoad: () async {
     await Future.delayed(Duration(seconds: 2), () {
       if (mounted) {
           setState(() {
             count += 10; }); }}); }, child: ListView.builder( itemBuilder: (BuildContext context,int position) {
         return ListTile(
            title: Text('test'),
            subtitle: Text('Some description')); }, itemCount: count, ))Copy the code

Create a common_list file. This page can be used in combination with the common_widget from the previous section.

 EasyRefreshController _controller = EasyRefreshController();
  int currentPage = 0;
  List dataList = [];

  @override
  void initState() {
    super.initState();
    EasyRefresh.defaultHeader = ClassicalHeader(
      enableInfiniteRefresh: false,
      refreshText: 'Refresh down',
      refreshReadyText: 'It's falling.',
      refreshingText: 'Refreshing',
      refreshedText: 'ok',
      refreshFailedText: 'Load failed',
      noMoreText: 'No more data',
      infoText: "Last Update at 14:55",); EasyRefresh.defaultFooter = ClassicalFooter( enableInfiniteLoad: false, loadText:'load up',
      loadReadyText: 'Ready to load data',
      loadingText: 'Loading',
      loadedText: 'ok',
      loadFailedText: 'Load failed',
      noMoreText: 'I have my limits.',
      infoText: 'Last Update at 14:55',); getNetwork(); } void getNetwork()async {
    List arr = await widget.networkApi(currentPage);
    if(mounted) { setState(() { dataList = arr; }); }}  @override
  Widget build(BuildContext context) {
    return EasyRefresh(
        controller: _controller,
        onRefresh: () async {
          if (mounted) {
            setState(() {
              currentPage = 0;
            });
            getNetwork();
          }
        },
        onLoad: () async {
          if (mounted) {
            setState(() {
              currentPage += 1;
            });
            getNetwork();
          }
        },
        child: ListView.builder(
          itemBuilder: widget.itemBuilder,
          itemCount: dataList.length,
        ));
  }
Copy the code

Next comes the invocation

CommonListWiget(
  networkApi: (currentPage) async {
   Map result = await ReqHome.getListApi({
       'page': currentPage,
        'size': 5});if(result ! = null) {if (mounted) {
          setState(() {
              dataList = reslut;
           });
            returndataList; }}else {
      return [];
  }
 },
 itemBuilder: (BuildContext context, int position) {
      return ListTile(
          title: Text('test' + position.toString()),
          subtitle: Text('Some description')); },)Copy the code

Expose itemBuilder for easy logic and overall feel optimization. Welcome to talk about coaching. The idea is to encapsulate the network request page directly and put all the refresh loading logic in it. Improve as you learn. Start with 😄

Utility class

Tools this is relatively simple, such as mail, ID card, mobile phone number, verification code, get screen size, timestamp conversion change subject and so on. Use the Flustars library and GetX for verification

Changing theme Mode

Get.changeTheme(ThemeData.dark());
Copy the code

validation

The RegexUtil API of the Flustars library is as follows

IsMobileSimple: mobile phone number isMobileExact: mobile phone number isTel: phone number isIDCard: ID number isIDCard15: ID number15Bit isIDCard18: simply verify the id card number18Bit isIDCard18Exact: indicates the exact id card number18Bit isEmail: verify mailbox isURL: verify URL isZh: verify Chinese characters isDate: verify date verification in YYYY-MM-DD format, with even leap years taken into account isIP: verify IP address isUserName: verify Chinese characters isZh: verify Chinese characters isDate: verify date verification in YYYY-MM-DD format, with even leap years taken into account Verify user name isQQ: authenticate QQCopy the code

The same flustars library DateUtil ScreenUtil tool. I don’t want you to list them all

One more things…

  • The usage posture of the webView in Flutter