Impuls-App-Flutter

为 iOS 和 Android(可能还有 Web)用 Flutter 编写的开源音乐节应用。

appstore
gplay

依赖项

Flutter

Flutter 是实现通用应用(iOS + Android)的关键。
了解一下,它非常棒。

开发入门

git clone [email protected]:kodekameratene/impuls-app-flutter.git
cd impuls-app-flutter
flutter pub get
flutter run

更新图标

icon

替换位于 assets/images/icon.pngicon.png 文件,然后运行以下命令。

flutter pub run flutter_launcher_icons:main

更新启动屏

splash

替换位于 assets/images/splash.pngsplash.png 文件,然后运行以下命令。

flutter pub run flutter_native_splash:create

尽量保持尺寸一致,以便在所有设备分辨率上都能显示。当前尺寸基于 iPhone SE。

请确保上传带透明度的图片,并在 pubspec.yaml 中更改背景颜色。

flutter_native_splash:
  image: assets/images/splash.png
  color: "#021f2d" <- Change this to your favorite background color

Folder structure

这是我们 Flutter 应用的文件夹结构。
Flutter 已生成 Android 和 iOS 文件夹。如果打开它们,您会发现它们是普通的 iOS 和 Android 项目。

但由于我们使用 Flutter,我们主要关心的是 lib 文件夹。

.
├── android
│   ├── app
│   └── gradle
├── assets
│   └── images
├── build
│   ├── flutter_assets
│   └── ios
├── ios
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   └── Runner.xcworkspace
├── lib
│   ├── models
│   ├── pages
│   ├── providers
│   ├── requests
│   ├── views
│   └── widgets
├── resources
├── test
└── web

Lib 文件夹

让我们仔细看看 lib 文件夹。

lib
├── main.dart
├── models
├── pages
├── providers
├── requests
├── views
└── widgets

Main.dart

lib 文件夹内直接就是 main.dart。这是整个应用被设置和启动的地方。

您可以看到我们在应用根部的 build 方法中配置了我们的 Providers。这使得我们的 widgets 可以轻松地共享一些状态。
观看 Paul Halliday 的这个视频,了解 Providers 的介绍。

https://www.youtube.com/watch?v=8II1VPb-neQ

他在这里也谈到了 bloc,但我认为他并没有真正使用 bloc 模式……总之。这是一个很棒的视频,让我轻松理解了 Providers。

模型

Model 是一个类,代表我们想在应用中显示的数据。
它帮助我们确保以有意义的方式使用我们的数据。

这有点抽象……如果您有任何问题,请与 Henry 交流。或者用更好的解释更新此 README。谢谢。

models
├── Arrangement.dart
├── Event.dart
├── InfoPost.dart
└── NewsPost.dart

提示:使用 Javier Lecuona 的 JSON to Dart 转换器,从您的 JSON 生成 Dart 类。

页面

这是我们放置完整的“脚手架化”页面之处。

pages
├── DetailPage.dart
├── EventDetailPage.dart
├── InfoDetailPage.dart
├── NewsDetailPage.dart
├── TabPage.dart
└── counter.dart
FlatButton(
  child: Text("Navigate to SomePage"),
  onPressed: () => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => SomePage(),
    ),
  ),
);

请参阅 https://flutterdart.cn/docs/cookbook/navigation/navigation-basics,了解导航的基础知识。

Providers

这是著名的 Provider。它使得在应用树的顶层和底层跨 widgets 轻松共享状态。

providers
├── AppSettings.dart
├── ArrangementProvider.dart
├── EventProvider.dart
├── EventsProvider.dart
├── InfoProvider.dart
├── NewsProvider.dart
└── counter_bloc.dart

待办事项:撰写介绍

请求

这是我们添加所有 API 端点的地方。
目前我们只有一个 API,我们简单地称之为 api.dart。但未来,我们可能会有一个 weather.dart API。

requests
└── api.dart

API 连接到一个 Provider,该 Provider 接收数据并用我们的模型创建对象,然后将该数据提供给我们的所有其他 widgets。

视图

这是我们添加你猜对了的 视图 的地方。
视图是多个小部件的组合。

视图需要显示在一个 Page 中,因为它缺少使之成为 Page 所需的脚手架。

views
├── CalendarView.dart
├── InfoView.dart
├── IntroView.dart
└── NewsView.
dart

小部件

Widgets,widgets,widgets。

这是存放我们所有自定义 widgets 的地方。

widgets
├── FrostedButton.dart
├── decrement.dart
├── increment.dart
└── toggleTheme.dart

GitHub

https://github.com/kodekameratene/impuls-app-flutter