Using Flutter to Design a Nice "Me" Page

Recently I ran into some really annoying trivial matters, my state has been pretty down, and a lot of things I had originally planned have been delayed. It's really hard to take……

I've seen friends in the backend keep asking why the blog and WeChat official account haven't been updated, so now that I'm done being busy and have some free time, I'm here with an update!

Preface

It started when I recently picked up an old project again (something I did as a hobby, planning to operate it myself if I get the chance) to continue improving it, then found that some of the UI design was too rough, really not satisfied (even though that's because there weren't many features to begin with), so I started optimizing~ This should turn into a series of articles, and today let's start with the App's "Me" page~

Screenshots

Without further ado, here are the screenshots.

Before the change, the top of the page only had three elements—avatar, name, and signature—which looked quite empty; after the change, I added social-attribute elements like level (experience), posts, following, and followers, plus a QR code icon. It looks a bit more high-end~

Different Themes and Night Mode

Take a look at the effect under different themes and night mode (actually this night mode still needs optimization, I feel the contrast is too high)

Ideas for Improving the Page Header

For this page's header I referenced Coolapk App's design. I originally planned to reference the Bilibili client, but found that Bilibili's was a bit perfunctory, not to mention ugly (to my aesthetic), and it didn't even have interaction effects. It felt like a product of programmers being forced by a deadline (shrug)

First, take a look at my nested-doll structure

It's actually quite simple: just insert another Container in the middle of the original Column that held the name and signature to implement level, experience, and a progress bar, and that's ok~

The code is as follows (due to length, only the key code is shown here):

Widget _buildHeader() {
    return Consumer<UserModel>(
      builder: (BuildContext context, UserModel userModel, Widget child) {
        var row = Row(
          children: <Widget>[
            ClipOval(child: daAvatar(userModel.user.avatar)),
            Expanded(
              child: Column(
                children: <Widget>[
                  // 用户名
                  Text(userModel.isLogin ? userModel.user.nickname : '注册或登录'),
                  // 等级、经验
                  if (userModel.isLogin)
                    Container(
                      child: Column(children: [
                        Row(children: [
                            Text('LV3')),
                            Text('9372/27000'),
                          ]),
                        LinearProgressIndicator(value: 0.3, valueColor: AlwaysStoppedAnimation(Colors.blue)),
                      ]),
                    ),
                  // 个性签名
                  Text(userModel.isLogin ? (userModel.user.signature ?? '没有个性签名') : '请先登录以获得专属服务~'),
                ],
              ),
            ),
            // 二维码和右箭头
            Icon(Icons.qr_code, color: Theme.of(context).primaryTextTheme.headline6.color),
            VerticalDivider(width: 10),
            Icon(Icons.chevron_right, color: Theme.of(context).primaryTextTheme.headline6.color),
          ],
        );
      },
    );
  }

Design of the Posts, Following, and Followers Component

Below the page header there's also this component, used to display social-related information. This component is embedded in the listview below, and can slide along with the page.

The implementation is very simple, I'll just put the code:

Widget _buildCard() {
  return Container(
    margin: EdgeInsets.fromLTRB(5, 10, 5, 10),
    child: Card(
      child: Container(
        margin: EdgeInsets.fromLTRB(5, 10, 5, 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _buildNumberTextWidget('62', '动态'),
            _buildNumberTextWidget('18', '关注'),
            _buildNumberTextWidget('89', '粉丝'),
          ],
        ),
      ),
    ),
  );
}

The implementation of _buildNumberTextWidget is as follows:

Widget _buildNumberTextWidget(String number, String text) {
  var foreColor = Global.profile.darkMode ? Colors.white54 : Theme.of(context).primaryColor;
  return TextButton(
    child: Column(children: [
      Text(number, style: TextStyle(fontSize: 30, color: foreColor)),
      Text(text, style: TextStyle(color: foreColor)),
    ]),
    style: ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 40))),
    onPressed: () => BotToast.showText(text: '妙啊'),
  );
}

Because I needed to consider interaction feedback, I wrapped the content with a TextButton widget here. (Note: the TextButton widget was introduced in the new version of Flutter to replace the original FlatButton)

Interaction Effects

I recorded an animation, take a look at the final interaction effect:

It's passable I guess (no UI, so I can only cobble something together myself hh)

Afterword

After more than half a year, coming back to Flutter, I found that Flutter has already been updated to version 2.x, and the new dart language has also added null safety, taking another step closer to kotlin/c#. Mainstream third-party libraries have also followed up, all releasing null safety versions of their libraries. Overall the development experience is still pretty good~

But the finished product, the feeling it gives me, still doesn't match native in performance, and it's hard to achieve the same silky smoothness as native. But Flutter is really fast for building UIs, and the Chinese community is very active. Domestically, thanks to several big companies taking the lead, attention is high. For basic CRUD scenarios, Flutter handles them with no pressure, and you can also get better performance and a better user experience than React Native or uni-app. The only regret is that you can't make WeChat mini programs…

This OneCat App, throughout such a long period of development and testing, has always had various small issues pop up, always some place that's not quite satisfactory, which made me once want to rewrite it in native. But later I thought Flutter is fast for writing UIs, so I let it go, just writing it for fun~

Welcome to Discuss

Programming Lab focuses on exploring popular new internet technologies and team agile development practices. Reply linux, flutter, c#, netcore, android, kotlin, java, python, etc. in the backend of the WeChat official account 「Programming Lab」 to get related technical articles and materials. At the same time, if you have any questions you can leave a message in the official account backend~

• Cnblogs: https://www.cnblogs.com/deali/
• Coding livestream: https://live.bilibili.com/11883038
• Zhihu: https://www.zhihu.com/people/dealiaxy