(Original) getX+Dio implements Flutter’s floating top page effect

Preface

The development of Flutter is relatively mature, and many commercial applications on the market are now using this technology.
To be honest, Flutter is very efficient in implementing some basic UI interfaces.
Of course, the premise is that you have a certain understanding of it.
Today I will demonstrate how to achieve a basic floating top page effect.
Let’s take a look at the specific finished picture first:
Insert image description here

core code

First look at the structure of the code:
Insert image description here

main is the main entrance of the project. Because getx is used, GetMaterialApp is used:

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'getx+Dio',
      home:  NestedScrollViewDemo(),
      // home:  BannerDemo(),
    );
  }
}

Models are used to store entity beans. Needless to say, the
Controller package is mainly used to store our state control,
which is equivalent to the Viewmodel in Android. It is used to update the UI when the data changes.
It inherits GetxController
and uses .obs to define some state variables.

The actual request for network data is still in the ApiService class:

class ApiService {
    
    
  static Future<List<DataElement>?> fetchNews() async {
    
    
    var response = await Dio().get("https://www.wanandroid.com/article/listproject/1/json?page_size=30");
    if (response.statusCode == 200) {
    
    
      return dataElementFromJson(json.encode(response.data["data"]["datas"]));
    }
    return null;
  }
}

Finally, the UI effect of the suspended top page is in the NestedScrollViewPage class. The
main widgets used in this piece are NestedScrollView and CustomScrollView.
TabController is used to monitor tab switching.
The general code is like this. In fact, the overall code is somewhat similar to Android's MVVM.
Of course, it is not here yet. With two-way binding,
network requests are useless. Just Retrofit (you can also use Retrofit in Flutter).
You can draw a rough diagram:
Insert image description here

JSON to Dart

When converting json to Dart entity classes in actual development, I used this website:
json_to_dart
. It can easily convert json to the entity class you want.
Just set the class name and click the button, as shown below:
Insert image description here
Now It can also be
generated through the IDE plug-in. Download the Json To Dart plug-in and the FlutterJsonBeanFactory plug-in.
The former can be configured with various attributes, such as whether subclasses are generated as internal classes, etc.

It is also very simple to use:
Insert image description here
you can set different generation rules:

Complete code

Post the complete code path of this small example:
flutter implements floating top effect

Learning material sharing

Finally, this article involves the learning of dio and getx. Let’s also post some learning materials:
flutter network request library comparison with
Flutter-Tencent Cloud Blog
GetX Basic Tutorial