flutter小白是如何在一周内用chatGPT开发一款App的

创作初衷

这篇文章创作的初衷，只是为了写一个有关日历类的软件供自己使用，考虑到自己从来还没有使用flutter正式创作一个app，因此磨刀霍霍想试一试。

至于为什么要做一款日历软件，因为发现市面上的关于万年历的软件都有很多广告，想着自己也能做，就做个给自己用。同时里面包含了额外的模块，包括万年历、天气以及小常识等等。。。

创作过程

由于自己是flutter小白，对Dart语言也是一知半解，因此想在快速的时间内去完成一款app，就可能得翻破flutter官网相关的文档，效率不见得很高，因此主要结合chatGPT给我做知识扫盲以及方案选型建议。

比如我让chatGPT给我生成一段日历的核心逻辑：

然后不断加以修正，比如可以支持从星期日开始：

虽然不是很熟悉dart语法，但是并不是很影响我读懂代码。一般做过React或者声明式语言(android compose/swift)语言的人，上手flutter会相当快。

chatGPT在问答的过程中，也会说一些胡话，比如我在做天气模块的时候，需要实现一个向上滚动，标题部分自动缩小，并保证滚动条在标题下方滚动的功能，但是chatGPT并不能给我正确的回答，准确的说，它能给我回答，但是大多都是它胡诌的。

所以在使用这类AI工具的时候，需要自己识别它给出的到底是不是一个正确的答案，可以不断去试错，切不可一条路走到黑，无脑去相信。

关于如何精准使用chatGPT做问答、搜索、创作，以及源码解析，我司邮件每天都有讨论，欢迎加入探讨。

说（遇）说（到）重（的）点（坑）

几个重要的库或选择

路由：fluro
状态管理：provider
网络：dio
本地sqlite：sqflite
农历：lunar
天气Api：和风天气

至于为什么这么选择？我都是在chatGPT中问出来的，毕竟小白首先得知道方向在哪里，然后根据给出的提示去官方文档进行比较。

比如在选择使用哪个天气时，我首先从chatGPT给我的推荐中去官网查看，看是否能够满足我的需求

免费API (或者说调用次数在多少次内免费)
是否提供当天的详细天气情况
是否提供一天24小时的天气走势
是否提供7天之内的详细情况

经过比较之后，我发现上述的都不是特别合适，基本上提供7天以上的就不能免费订阅了，所以在此基础上，我就会再加上一些关键词，比如 "免费API", "7天天气详情"等等。

底部导航栏动画

原本采用的是flutter默认提供的导航栏，后来想想怎么也的折腾一番。但是这一折腾不打紧，导致我后面路由的设计全改变了。

页面有4个导航tab，所以我最开始采用了4个路由，分别对应4个tab

class Routes {
  static String calendar = "/calendar";
  static String weather = "/weather";
  static String sense = "/sense";
  static String settings = "/settings";
  // ...
}

这样安于现状老老实实切换是木有问题的，但是我想在切换的时候加点动画，类似与这样的，就不work了：

原因是这个组件在路由切换的时候，都会重新渲染一份，所以动画肯定是没有的，无奈之下，就提取了一个公共页，采用分支逻辑hide/show，来做tab页面的切换

Scaffold(
  appBar: getAppBar(selectedIndex, context),
  body: getBody(selectedIndex, senseState),
  bottomNavigationBar: renderBottomNavigationBar(
    context,
    selectedIndex,
    (index) {
      setState(() {
        selectedIndex = index;
      });
    },
  ),
  floatingActionButton: getFloatingActionButton(selectedIndex, homeState),
);

Widget getBody(int index, SenseState senseState) {
  switch (index) {
    case 0:
      return const Calendar();
    case 1:
      return const Weather();
    case 2:
      return CommonSense(senseState: senseState);
    case 3:
      return const Settings();
    default:
      return const Calendar();
  }
}

数据预加载

我做的这个demo里面，由于需要展示天气信息，所以在显示日历的时候，就可以进行天气信息的预加载了。

我的具体做法是在main.dart中，在weatherState初始化后就立即将天气信息获取然后塞入state中，这样在我切换到天气页面的时候，就可以获取到详细的数据了。【可能有更加好的办法💐】

// main.dart
final position = await _determinePosition();
final weatherState = WeatherState(position);
weatherState.getWeatherInfo();

// weather_state.dart
Future<void> getWeatherInfo() async {
  final location = "${position.longitude},${position.latitude}";
  final responses = await loadAllWeatherData(location);

  if (responses.isNotEmpty && responses.length == 4) {
    final weatherLocation = responses[0] as WeatherLocation;
    final weatherNow = responses[1] as WeatherNow;
    final weatherHourly = responses[2] as WeatherTwentyFourHours;
    final weatherDaily = responses[3] as WeatherSevenDays;
    setWeatherInfo(
      weatherLocation.location[0],
      weatherNow.now,
      weatherHourly.hourly,
      weatherDaily.daily,
    );
  }
}

日历月份切换

采用了flutter_swiper这个组件来做左右日历的滑动，但是要想很丝滑（当滑动下一个月的时候，能够立马看到数据），就需要把提前将下一个月的日历详情全部生成出来，最开始想直接生成几年的数据，想想还是太粗暴了，所以只是生成了前一个月以及后一个月的数据。

var list = [prevCalendarDates, calendarDates, nextCalendarDates];

Swiper(
  index: 1,
  loop: false,
  duration: 1,
  itemCount: list.length,
  onIndexChanged: (int index) {},
  itemBuilder: (BuildContext context, int index) {}
)

可以看到，我默认在swiper中显示的索引是1，这样显示的就是当前月份的日历信息。但是这样也有一个问题，由于这个swiper组件自带从左到右的动画，滑到上个月还好，但是滑到下一个月，就会有一个先向左再向右的动画突兀，所以我将duration的值改为了1，就是避免使用swiper的动画。

关于本地存储

最开始其实没有打算用到服务器来进行api请求，毕竟最开始的打算只是做一个简简单单的万年历，所以所有的事件、提醒信息都打算存储在本地，采用sqlite关系型数据库来解决。

后来需求膨胀（加了常识模块），发现这玩意就不好使了，因为常识模块需要添加的字段比较多，并不像日历部分只需要加几个简单的字段，而且也不会特别多，所以不得已又迫使搞出个后台来。

其间纠结了很久，要不要就统一使用本地数据库呢？常识这块搞一个本地后台管理就好了，连接到august.db文件，然后进行增删查改也不是不能接受，后来发现有点虚，毕竟我是想在自己的手机上run的，难道每次同步还得把自己电脑后台服务打开，想想都有点麻烦。

所以后来还是把常识这块部署到了生产环境，日历事件部分采用的本地数据库，这样会快一点进行每天日历事件的初始化。所以整个一块的改动也是反反复复的。

日历事件采用本地sqlite

class DatabaseProvider {
  // ...

  Future<Database> _initDatabase() async {
    final databasesPath = await getDatabasesPath();
    final path = join(databasesPath, 'august.db');
    Logger.d("database path: $path");

    return await openDatabase(
      path,
      version: 1,
      onCreate: (db, version) async {
        await db.execute('''
            CREATE TABLE IF NOT EXISTS ${CalendarDB.calendarEvent} (
              id TEXT,
              dateId TEXT,
              title TEXT,
              content TEXT,
              date INTEGER,
              lunarDate TEXT,
              isCycle INTEGER,
              cycleBy INTEGER,
              createTime INTEGER,
              modifyTime INTEGER,
              deleted INTEGER
            )
          ''');
      },
    );
  }
}

常识部分调远端api

final baseUrl = "${dotenv.env['SENSE_BACKEND_URL']}/api/senses";

Future<List<CommonSense>> getCommonSenseByPage(
    {int page = 1, int pageSize = 20}) async {
  final response = await Http.get(
    "$baseUrl/",
    params: {'page': page, 'pageSize': pageSize},
  );

  return SenseResponse.fromJson(response.data).data;
}

然后至于本地的事件提醒数据，打算定期备份，即把本地的数据库文件上传至服务器。【TODO】

天气滑动动画

为了实现上面的动画，chatGPT多少是在这块犯浑了，尽管给我指引了采用sliverAppBar来实现此功能；

但是当向上滑动时，滚动条默认会从屏幕的最顶端开始滑动，这就导致了滑动的内容会透过缩小后的文字 [贴图中 -> 旧金山多云 13°C]显示在下面，再次询问如何解决时，给我的总是错误的答案，看来还是不能轻信啊😁

后来google了解决办法，采用了CustomClipper，这里贴一下：

import 'package:flutter/material.dart';
import 'dart:math' as math;

class CustomClipperContainer extends StatelessWidget {
  final Widget child;

  const CustomClipperContainer({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return ClipRect(
      clipper: MyCustomClipper(
        clipHeight: MediaQuery.of(context).size.height - 220,
      ),
      child: child,
    );
  }
}

class MyCustomClipper extends CustomClipper<Rect> {
  final double clipHeight;

  MyCustomClipper({required this.clipHeight});

  @override
  getClip(Size size) {
    double top = math.max(size.height - clipHeight, 0);
    Rect rect = Rect.fromLTRB(0.0, top, size.width, size.height);
    return rect;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

// 使用
CustomClipperContainer(
  child: ListView(
    padding: EdgeInsets.zero,
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    children: const [
      HourlyForecast(),
      SevenDayForecast(),
      CurrentDetail(),
    ],
  ),
)

天气背景映射

由于天气背景我采用了flutter_weather_bg这个库，里面包括了一系列的天气背景动画，比如下雨、雷电、下雪等等动画场景，但是由于我使用了和风天气，返回的api里面并不能很好的和这个库搭配起来，所以这里不得不做映射处理。

WeatherType getWeatherTypeBy(String weatherText, String icon) {
  if (weatherText == '晴') {
    if (icon == '100') {
      return WeatherType.sunny;
    } else {
      return WeatherType.sunnyNight;
    }
  } else if (weatherText.contains('云')) {
    if (icon == '101' || icon == '102' || icon == '103') {
      return WeatherType.cloudy;
    } else {
      return WeatherType.cloudyNight;
    }
  } else if (weatherText == '阴') {
      // ...
  }
  // ...
}

按照道理讲，关于天气这一块所有的api请求，最好还是要走一层后端，如果再做厚一点，应该有个BFF层来专门处理数据的组装、转发等场景。比如类似这样的mapping，以及获取天气数据的信息等请求就可以由BFF给我返回了，这样做的好处是，将更多的细节封装到了内部，前端只需要更加纯粹地显示数据就好了，如果后续有改动，比如我的天气从和风API转成了XXX API，前端部分可以完全不用再改动了。

但是由于我是后来才想起我要做个常识模块，那个时候才引入了一个后台，所以前面的就懒得整了。【TODO】

滑动后退失效了

当我快要完成我的demo时，我突然想起来，试试滑动后退，发现怎么也不起作用。后来想想问题应该是出在了路由上，于是去网上扒了扒

找到个issue

将默认的TransitionType设为TransitionType.cupertino就解决了。

主题部分

准备了两套颜色，明亮色以及暗黑色【颜色部分可能还是得有设计师来，这块真是搞得我头痛】，然后使用ThemeData进行封装，然后在MaterialApp上进行设置。

MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: globalState.isDarkMode ? darkTheme : lightTheme,
  onGenerateRoute: Application.router.generator,
);

将用户的偏好存储在sharedPreferences中，这样当用户下次再次进入app时，就能记住上次是选择了哪个主题。

// user_preference.dart
class UserPreference {

  static Future<bool> getThemeMode() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var isDarkMode = prefs.getBool(isDarkModeText);
    return isDarkMode ?? false;
  }

  static Future<void> updateThemeMode(bool isDarkMode) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setBool(isDarkModeText, isDarkMode);
  }
}

// global_state.dart
class GlobalState extends ChangeNotifier {
  bool isDarkMode = true;

  GlobalState(this.isDarkMode);

  void toggleTheme() async {
    isDarkMode = !isDarkMode;
    UserPreference.updateThemeMode(isDarkMode);
    notifyListeners();
  }
}

还有一些可以讲讲

使用dotenv获取环境变量

final apiKey = dotenv.env['WEATHER_API_KEY'];

好处是配置与使用隔离，这样也安全一点。

使用Json To Dart插件生成model

网上也有使用json_serializable来实现序列化与反与反序列化的，但我个人觉得小项目还是这个插件好用，因为这个库会将文件分割成两个部分。

flutter_native_splash生成splash页面

使用这个库flutter_native_splash，详细用法参看官方文档。

# 更新splash页面，更新玩颜色以及背景图片后，运行以下命令
flutter clean && flutter pub get && flutter pub run flutter_native_splash:create

后端部分

分为august-server以及august-admin，server主要提供api服务，admin提供后台数据管理，admin的模版是从网上嫖的。感兴趣可以自己去看看 vue-manage-system

数据库采用了postgres，使用docker-compose做了服务编排，这里贴一下，感兴趣自己看看

version: '3.8'  
  
services:  
    postgresdb:  
        image: postgres:14.8  
        restart: unless-stopped  
        env_file: ./.env  
        environment:  
            - POSTGRES_DB=$POSTGRES_DATABASE  
            - POSTGRES_USER=$POSTGRES_USER  
            - POSTGRES_PASSWORD=$POSTGRES_PASSWORD  
        healthcheck:  
            test: pg_isready -U postgres  
        ports:  
            - $POSTGRES_LOCAL_PORT:$POSTGRES_DOCKER_PORT  
        volumes:  
            - ./data:/var/lib/postgresql/data  
    app:  
        depends_on:  
            postgresdb:  
        condition: service_healthy  
        build: ./august-server  
        restart: unless-stopped  
        env_file: ./.env  
        ports:  
            - $NODE_LOCAL_PORT:$NODE_DOCKER_PORT  
        environment:  
            - DB_HOST=postgresdb  
            - DB_USER=$POSTGRES_USER  
            - DB_PASSWORD=$POSTGRES_PASSWORD  
            - DB_NAME=$POSTGRES_DATABASE  
            - DB_PORT=$POSTGRES_DOCKER_PORT  
        stdin_open: true  
        tty: true  

    admin:  
        depends_on:  
            - app  
        build: ./august-admin  
        restart: unless-stopped  
        env_file: ./.env  
        ports:  
            - $ADMIN_LOCAL_PORT:$ADMIN_LOCAL_PORT  
        environment:  
            - PROXY_PROT=$NODE_DOCKER_PORT

需要提一点的是，app服务需要完全等数据库服务启动之后，才能请求数据，否则直接报错。所以这块，我加了healthcheck（最开始我一直以为是mysql的问题，后来发现切换成postgres后依然有问题😁😄）。

总结

好了至此为止，想说的就已经说完了，整个功能来说相对简单，当然也躺了不少的坑，仅此供学习交流。

另外，针对一门新的技术，chatGPT能给你很好的入门指导，虽然胡说的不一定准，但是不说肯定是啥都不知道😂😂

最后贴贴代码仓库：

august：八月 flutter app
august-backend：后台server以及管理

仅供学习交流，勿商用！！！

posted @ 2023-07-07 10:14 糊糊糊糊糊了阅读(1196) 评论(4) 编辑收藏举报

刷新页面返回顶部

糊糊糊糊糊了

enjoy coding! enjoy life! 个人博客：http://www.rynxiao.com