Start with a “lonely island” APP (No.3, Book list, Search box and Dio)

preface

Read the advice

• Who’s best for: people who work on front-end and mobile development & aspirants who want to get to know the new Flutter technology
• Number of words: 2328
• Length: It’s basic and no brainer, so it takes a while to finish
• Scene: crowded subway, sofa, etc

Read the comments

There hasn’t been much encouragement since the release of this “Islan” APP (No.2, Splash Page, guide Page). Only the comment “Big guy”, “Niupiah”, is from Diguyouping he. Maybe we don’t know that this series of Flutter, What shape is it going to apply to what Flutter technology we’re going to use

• Widget usage,Status' 'no status
• Common third-party plug-ins
• Model Json to transform the relationship between both
• Provider global status management
• Fluro Route Management library
• Dio Network Request
• …

Summary to reflect

So let me draw this APP first, what will it look like? The UI is not my original, it will be applied to a set of background API

• Complete development document background API this is [forest wind team] small procedures related to the interface, temporarily use this first

• What the full APP looks like

  

  

• Review project Catalog

We’ll try our best in the future

• UI View section
• Background interactive processing
• Small BUG fixes

Such three parts to construct the structure of the main article, then we will develop together the [book list] part of this journey, do it,

1. UI interface

1.1 Top search bar, search box and search bar

• Functions: to achieve the search function, to search books
• Includes: history search, popular search, search cancellation, etc

In keeping with the core idea of component-oriented, component-oriented development, I’m going to create a new search widget in the Widgwts folder and name it widget_search_bar.dart using a third-party plug-in

1.2 search_widget

• Current version ^1.0.0

• Use: The package provides a search widget for selecting an option from a list of data. Provides item filtering based on search text.

   // import 'package:loader_search_bar/loader_search_bar.dart';
   
  Copy the code

When I was writing this article, I made a mistake in the part of lead package, and wrote it into another package for searching. Thank you for digging friendsHui, 2019Thank you for your kind advice. The following is the correct way to lead the package

— — — — — — — — — — — — — — — — — — — — — — correct — — — — — — — — — — — — —

import 'package:search_widget/search_widget.dart';
Copy the code

Paste the package file address search_widget here

Initialize the compatibility configuration in main

// Compatible exception handling
void enablePlatformOverrideForDesktop() {
  if (!kIsWeb && (Platform.isMacOS || Platform.isWindows || Platform.isLinux)) {
    debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  }
}

Copy the code

And that’s actually main is basically doing some initialization

void main() {
  enablePlatformOverrideForDesktop();
  runApp(MyApp());
}
Copy the code

Initialize the list data

 List<LeaderBoard> list = <LeaderBoard>[
    LeaderBoard("Flutter".54),
    LeaderBoard("React".22.5),
    LeaderBoard("Vue".24.7),
    LeaderBoard("Applets".22.1)];Copy the code

The data is shown here in the list

The core code is

     SearchWidget<LeaderBoard>(
            dataList: list, / / the data source
            hideSearchBoxWhenItemSelected: false,
            listContainerHeight: MediaQuery.of(context).size.height / 4.// The option to filter the list of data based on the search query
            queryBuilder: (query, list) {
              return list
                  .where((item) =>
                      item.username.toLowerCase().contains(query.toLowerCase()))
                  .toList();
            },
            // Pops up the list item builder option. This basically returns a widget to display as a list item in a pop-up window
            popupListItemBuilder: (item) {
              return PopupListItemWidget(item);
            },
            // Option for the selected list item builder, enabled when the user selects an item from the pop-up list
            selectedItemBuilder: (selectedItem, deleteSelectedItem) {
              return SelectedItemWidget(selectedItem, deleteSelectedItem);
            },
            // Custom widgets
            noItemsFoundWidget: NoItemsFound(),
            // Provide the option to customize TextField. Accept TextEditingController and FocusNode as parameters
            textFieldBuilder: (controller, focusNode) {
              return MyTextField(controller, focusNode);
            },
            // Used to get the selected option. Returns the selected item; If the item is deleted, null is returnedonItemSelected: (item) { setState(() { _selectedItem = item; }); },),Copy the code

1.3 MediaQuery

listContainerHeight: MediaQuery.of(context).size.height / 4.Copy the code

In this section, MediaQuery is useful as a way to adapt the screen, which was mentioned earlier in the first part of the journey

I don’t want it to show up in the search

 selectedItemBuilder: (selectedItem, deleteSelectedItem) {
              return SelectedItemWidget(selectedItem, deleteSelectedItem);
            },

Copy the code

If we look at the source code, it still requires that we pass it in, so let’s return this part to an empty Container

class SelectedItemWidget extends StatelessWidget {
  const SelectedItemWidget(this.selectedItem, this.deleteSelectedItem);

  final LeaderBoard selectedItem;
  final VoidCallback deleteSelectedItem;

  @override
  Widget build(BuildContext context) {
    return Container();
	// This Container() is the selected value returned
    // Container(
    // padding: const EdgeInsets.symmetric(
    // vertical: 2,
    // horizontal: 4,
    / /),
    // child: Row(
    // children: 
      
       [
      
    // Expanded(
    // child: Padding(
    // padding: const EdgeInsets.only(
    // left: 16,
    // right: 16,
    // top: 8,
    // bottom: 8,
    / /),
    // child: Text(
    // selectedItem.username,
    // style: const TextStyle(fontSize: 14),
    / /),
    / /),
    / /),
    // IconButton(
    // icon: Icon(Icons.delete_outline, size: 22),
    // color: Colors.grey[700],
    // onPressed: deleteSelectedItem,
    / /),
    / /,
    / /),
    // );}}Copy the code

1.4 Data Model

When initializing data, we filled the LeaderBoard(“Flutter”, 54). Each data is actually a data Model. Let’s not mention the conversion between JSON and Model here

2. Background communication

2.1 Dio a preliminary

In the subsequent journey and background communication process, we selected the dio library to assist requests, which is similar to axios in React and Vue projects.

Dio is a powerful Dart Http request library with support for Restful apis, FormData, interceptors, request cancellation, Cookie management, file upload/download, timeouts, custom adapters, and more… That means there’s got to be a way to communicate with the background, doesn’t it? The current version is 3.0.7

• Add the dependent

dependencies:
  dio: ^3.07.


Copy the code

• Import files in need

import 'package:dio/dio.dart';

Copy the code

Let’s first send a request to try, so which background interface to choose, I remember before there was an online simulation interface, is using taobao open source

RAP2

• Interface Address Online interface simulation

• The response data

  {
    "code": 200."data": [{"name": "Yang Xiao Yang"."age": 18."flag": "up"}}]Copy the code

• GET means you can type it directly into the browser address bar and it will return the result

So how do we use the aforementioned DIO to send requests? Since it is a network request, it is still the same, it is not to encapsulate, that chapter of our first try water, a preliminary discussion.

For the time being, write the requested method in the utils public method folder named my_http.dart and write a simple line of code

import 'package:dio/dio.dart';

void getHttp() async {
  try {
    Response response = await Dio().get(
        "http://rap2api.taobao.org/app/mock/236998/isolated/island/api/v1/test");
    print('The result returned in the background is${response}');
  } catch (e) {
    print(e); }}Copy the code

Dart. Stateful components have this initialization method that does something in it, sort of like a front-end lifecycle hook. Obviously, the debug console returns exactly what we expect

2.2 Background API analysis

Take a look at the interface data returned by the real background, which returns a list with summaries of all the popular books

• Get popular books
• Request mode GET
• URL:/book/hot_list
• Response 200
• Return a message

[{
	"author": "[\u7f8e]\u4fdd\u7f57\u00b7\u683c\u96f7\u5384\u59c6"."fav_nums": 259."id": 7."image": "https://img3.doubanio.com/lpic/s4669554.jpg"."like_status": 0."title": "\u9ed1\u5ba2\u4e0e\u753b\u5bb6"
}, {
	"author": "MarkPilgrim"."fav_nums": 145."id": 65."image": "https://img3.doubanio.com/lpic/s4059293.jpg"."like_status": 0."title": "Dive Into Python 3"
}, {
	"author": "MagnusLieHetland"."fav_nums": 88."id": 183."image": "https://img3.doubanio.com/lpic/s4387251.jpg"."like_status": 0."title": "Python\u57fa\u7840\u6559\u7a0b"
}, {
	"author": "[\u54e5\u4f26\u6bd4\u4e9a]\u52a0\u897f\u4e9a\u00b7\u9a6c\u5c14\u514b\u65af"."fav_nums": 99."id": 1002."image": "https://img3.doubanio.com/lpic/s6384944.jpg"."like_status": 0."title": "\u767e\u5e74\u5b64\u72ec"
}, {
	"author": "[\u65e5]\u5ca9\u4e95\u4fca\u4e8c"."fav_nums": 78."id": 1049."image": "https://img1.doubanio.com/view/subject/l/public/s29775868.jpg"."like_status": 0."title": "\u60c5\u4e66"
}, {
	"author": "[\u7f8e]\u4e54\u6cbb\u00b7R\u00b7R\u00b7\u9a6c\u4e01"."fav_nums": 52."id": 1061."image": "https://img3.doubanio.com/lpic/s1358984.jpg"."like_status": 0."title": "\u51b0\u4e0e\u706b\u4e4b\u6b4c\uff08\u5377\u4e00\uff09"
}, {
	"author": "[\u65e5]\u4e1c\u91ce\u572d\u543e"."fav_nums": 81."id": 1120."image": "https://img3.doubanio.com/lpic/s4610502.jpg"."like_status": 0."title": "\u767d\u591c\u884c"
}, {
	"author": "\u91d1\u5eb8"."fav_nums": 50."id": 1166."image": "https://img1.doubanio.com/lpic/s23632058.jpg"."like_status": 0."title": "\u5929\u9f99\u516b\u90e8"
}, {
	"author": "[\u65e5]\u4e1c\u91ce\u572d\u543e"."fav_nums": 13."id": 1308."image": "https://img3.doubanio.com/lpic/s3814606.jpg"."like_status": 0."title": "\u6076\u610f"
}, {
	"author": "[\u82f1]J\u00b7K\u00b7\u7f57\u7433"."fav_nums": 33."id": 1339."image": "https://img3.doubanio.com/lpic/s1074376.jpg"."like_status": 0."title": "\u54c8\u5229\u00b7\u6ce2\u7279\u4e0e\u963f\u5179\u5361\u73ed\u7684\u56da\u5f92"
}, {
	"author": "\u97e9\u5bd2"."fav_nums": 21."id": 1383."image": "https://img1.doubanio.com/lpic/s3557848.jpg"."like_status": 0."title": "\u4ed6\u7684\u56fd"
}, {
	"author": "[\u82f1]J\u00b7K\u00b7\u7f57\u7433"."fav_nums": 32."id": 1398."image": "https://img1.doubanio.com/lpic/s2752367.jpg"."like_status": 0."title": "\u54c8\u5229\u00b7\u6ce2\u7279\u4e0e\u6b7b\u4ea1\u5723\u5668"
}, {
	"author": "\u738b\u5c0f\u6ce2"."fav_nums": 17."id": 1560."image": "https://img1.doubanio.com/lpic/s3463069.jpg"."like_status": 0."title": "\u4e09\u5341\u800c\u7acb"
}, {
	"author": "[\u4f0a\u6717]\u739b\u8d5e\u00b7\u838e\u5854\u78a7"."fav_nums": 16."id": 7821."image": "https://img3.doubanio.com/lpic/s6144591.jpg"."like_status": 0."title": "\u6211\u5728\u4f0a\u6717\u957f\u5927"
}, {
	"author": "[\u65e5]\u6751\u4e0a\u6625\u6811"."fav_nums": 10."id": 8854."image": "https://img1.doubanio.com/lpic/s29494718.jpg"."like_status": 0."title": "\u8fdc\u65b9\u7684\u9f13\u58f0"
}, {
	"author": "\u4e09\u6bdb"."fav_nums": 18."id": 8866."image": "https://img3.doubanio.com/lpic/s2393243.jpg"."like_status": 0."title": "\u68a6\u91cc\u82b1\u843d\u77e5\u591a\u5c11"
}, {
	"author": "\u97e9\u5bd2"."fav_nums": 21."id": 15198."image": "https://img1.doubanio.com/lpic/s1080179.jpg"."like_status": 0."title": "\u50cf\u5c11\u5e74\u5566\u98de\u9a70"
}, {
	"author": "\u9c81\u8fc5"."fav_nums": 30."id": 15984."image": "https://img3.doubanio.com/lpic/s27970504.jpg"."like_status": 0."title": "\u671d\u82b1\u5915\u62fe"
}, {
	"author": "[\u65e5]\u4e95\u4e0a\u96c4\u5f66"."fav_nums": 33."id": 21050."image": "https://img3.doubanio.com/lpic/s2853431.jpg"."like_status": 0."title": "\u704c\u7bee\u9ad8\u624b31"
}, {
	"author": "[\u65e5]\u65b0\u4e95\u4e00\u4e8c\u4e09"."fav_nums": 24."id": 51664."image": "https://img3.doubanio.com/lpic/s29034294.jpg"."like_status": 0."title": "\u4e1c\u4eac\u65f6\u5473\u8bb0"
}]

Copy the code

• response_description

  Parameter field	meaning
  author	The author
  fav_nums	Thumb up for
  id	Book ID
  image	Picture books
  like_status	Whether the thumb up
  title	Book title

  To be continued…

This summary

In fact, there are a few things to do this week. I just got familiar with the appearance of the interface. As for the main development of book list, the data returned by the interface has been known, and the application of dio library has also been made clear

• Create an “island” APP from scratch (No.2, Splash Page, boot Page)
• A “lonely island” APP (No.1, Project initialization, screen adaptation)

Thank you for reading this. If you find it useful, please pay attention, give a like and write your personal opinion in the comments. I will also write some in-depth articles on a particular skill point, starting with the topic of state management in Flutter. Come on, I am Yang Small Yang, all the code will be synchronized to Github

• Github.com/yayxs/flutt here…

Special thanks to

Dig friends

• Huitaro pointed out the error of the article in the comment section in 2019

---

–END–THANKS–