Impuls-App-Flutter
为 iOS 和 Android(可能还有 Web)用 Flutter 编写的开源音乐节应用。
依赖项
Flutter
Flutter 是实现通用应用(iOS + Android)的关键。
了解一下,它非常棒。
开发入门
git clone [email protected]:kodekameratene/impuls-app-flutter.git
cd impuls-app-flutter
flutter pub get
flutter run
更新图标
![]()
替换位于 assets/images/icon.png 的 icon.png 文件,然后运行以下命令。
flutter pub run flutter_launcher_icons:main
更新启动屏

替换位于 assets/images/splash.png 的 splash.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
导航到 SomePage
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

