Project introduction

I remember that my last article was written in February 2018, which has not been updated for a long time. However, the version of Flutter has been updated several times. Since the official release of Flutter 1.0, I have been planning to rewrite the previous project, because Flutter itself has updated many new features, and the old ones are already in the past. Also, people often come to me and ask me that the previous project didn’t work, yes, because the SDK was too old, and the previous project was just a practice game.

In the past few years, there have been many technical articles and open source project examples about FLUTTER, almost every day. Compared to when RN first came out, the enthusiasm of FLUTTER is much higher than that of RN. Therefore, I rewrote the open source project with a passion for learning new technologies, and will continue to improve.

Why choose imitation BOSS Zhipin as a theme? Because this APP is believed to be used by all of us, there are many different and complex components in it. There are many subprojects based on the Flutter component library. Some functions in this APP, such as maps and IM, will be implemented using Flutter later. To make the project more realistic, this time even the server side was implemented. First open source address provided to everyone:

Making address:

Server version: Flutter imitation boss direct hire server.

Flutter version: Flutter imitation boss direct engage.

Project renderings:

Related technical points

Server:

  • The crawler server is realized based on Puppeteer + Mongo + NodeJS, and the server rendering and API service interface are realized using Nuxt + KOA2 + Vue. There won’t be too much space here, but this article will focus on Flutter. Those interested in the front-end will share related technical topics separately.

The flutter end:

  • The following components are used in this project. Remember the mantra: Flutter everything is a component. Container, Row, Column, Flex, ListView, CustomListView, Wrap, Padding, Center, Future, FutureBuilder, Expanded, Navigator, BottomNavigationBar, GesureDetector, Listener, CircleAvatar, and some custom components.
  • The layout is semantic, does not abuse the layout component, and simplifies the component nesting structure as much as possible

The technical details

  • Realize the startup screen. After 1.5 seconds of startup, jump to the APP and remove the route on the startup screen.
Navigator.of(context).pushAndRemoveUntil(
    PageRouteBuilder<Null>(
      pageBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget child) {
            return Opacity(
              opacity: animation.value,
              child: new MainPage(title: 'Boss hired straight')); }); }, transitionDuration: Duration(milliseconds: 300), ), (Route route) => route == null);Copy the code

  • Key: new PageStorageKey(‘key-name’) key: new PageStorageKey(‘key-name’)

  • Hero animation, in the details page, used two Hero animation, Hero animation is executed in the process of route switching animation. There needs to be a one-to-one correspondence between the current page and the target page.

Hero(
  tag: heroLogo,
  child: ClipRRect(
    borderRadius: new BorderRadius.circular(8.0),
    child: Image.network(
      widget.company.logo,
      width: 70,
      height: 70,
    ),
  ),
)),
Copy the code
  • CustomListView Slides when appBar shows hidden title. Collapsemode. parallax property collapsemode. parallax property collapsemode. parallax property CollapseMode. Change the state property so that the appBar title is hidden based on the scroll position by listening to the ScrollController and calculating the scroll position.
 _scrollListener() {
    setState(() {
      if (_scrollController.offset < 56 && _isShow) {
        _isShow = false;
      } else if (_scrollController.offset >= 56 && _isShow == false) {
        _isShow = true; }}); }Copy the code

TODO-LIST

  • Company details page slidePanel control implementation
  • Common shell layer component encapsulation
  • Message list control encapsulates and implements slip deletion function

Qq technology Flutter discussion 1000 people group number: 468010872

contact

Wechat: Heruijun2258, indicate the purpose of the visit.