(Flutter) 釣魚資訊平台 - Day1 - 定位

因為自己最近迷上了釣魚，但卻常常苦於不知道該去哪裡釣魚才能安全又有魚，因此想做個讓大家可以分享自己釣點以及釣況的App，讓大家都能找到適合自己的地方釣魚！

專案架構

Pub.dev

基本設定

void main() async {
　　await Firebase.initializeApp(); -> 確保建立Firebase相關的實例
　　runZonedGuarded(() async {
　　　　runApp(MyApp()); -> 啟動 App
　　}, (Object error, StackTrace stack) async {
　　　　// 這邊是錯誤處理，防止沒有被catch到的error, app會直接crash
　　　　// 可以做一個dialog來提醒user 或是在此紀錄錯誤log 方便之後修正
　　});
}

• getPages 為整個app所有的畫面路徑設定
• initialRoute 為app 進入的第一個畫面的路徑
• initialBinding 是開啟app時會初始化的GetX Binding
• 將原本的 MaterialApp 改為 GetMaterialApp，這樣就可以使用GetX來管理路徑了

class MyApp extends StatelessWidget {
　　const MyApp({Key? key}) : super(key: key);
　　@override
　　Widget build(BuildContext context) {
　　　　return GetMaterialApp(
　　　　　　title: 'Fish Info',
　　　　　　debugShowCheckedModeBanner: false,
　　　　　　theme: ThemeData(
　　　　　　　　primarySwatch: Colors.blue,
　　　　　　),
　　　　　　initialRoute: Routes.splashRoute, -> 第一個畫面的路徑
　　　　　　getPages: Routes.routes,
　　　　　　localizationsDelegates: const [
　　　　　　　　DefaultCupertinoLocalizations.delegate, -> 之後說明用處
　　　　　　],
　　　　　　initialBinding: GlobalBinding(),
　　　　);
　　}
}

路徑設定

class Routes {
　　Routes._();
　　static const splashRoute = '/splash';
　　static const homeRoute = '/home';
　　static final List<GetPage> routes = [
　　　　GetPage(name: splashRoute, page: () => const SplashPage(), binding: SplashBinding()),
　　　　GetPage(name: homeRoute, page: () => const HomePage(), binding: HomeBinding()),
　　];
}

如何連結GetX Controller

class GlobalBinding extends Bindings {
　　@override
　　void dependencies() {
　　　　Get.put<GlobalController>(GlobalController(), permanent: true);
　　}
}

啟動畫面

class GeoHelper {
　　GeoHelper._();
　　static Future<Position> determinePosition() async {
　　　　...
　　}
}

畫面

class SplashPage extends StatelessWidget {
　　const SplashPage({Key? key}) : super(key: key);
　　@override
　　Widget build(BuildContext context) {
　　　　return const SizedBox();
　　}
}

GetX Controller

class SplashController extends GetxController {
　　late CameraPosition initialCameraPosition;
　　late bool isPermissionAllowed;
　　@override
　　void onInit() {
　　　　GeoHelper.determinePosition().then((position) {
　　　　　　// 成功得到使用者的位置資訊
　　　　　　initialCameraPosition = CameraPosition(
　　　　　　　　target: LatLng(position.latitude, position.longitude),
　　　　　　　　zoom: Config.defaultCameraZoom,
　　　　　　);
　　　　　　isPermissionAllowed = true;
　　　　}).catchError((_) {
　　　　　　// 代表使用者拒絕提供位置資訊或是獲取資訊有錯誤，因此我們要給予一個預設的值
　　　　　　initialCameraPosition = Config.defaultCameraPosition;
　　　　　　isPermissionAllowed = true;
　　　　}).whenComplete(() {
　　　　　　// 不管有沒有錯誤最後都會進到這裡
　　　　　　// 這裡我們要進到下一個畫面
　　　　　　Get.offNamed(
　　　　　　　　Routes.homeRoute,
　　　　　　　　// 將我們在這裡得到的資訊傳到下一個頁面
　　　　　　　　arguments: HomePageArgs(
　　　　　　　　　　initialCameraPosition: initialCameraPosition,
　　　　　　　　　　isPermissionAllowed: isPermissionAllowed,
　　　　　　　　)
　　　　　　);
　　　　});
　　}
}

GetX 路徑

• Get.offNamed: 移除當前的畫面並進入到下一頁，因為我們不希望使用者再回到Splash畫面，因此將他移除，當然我們也可以透過WillPopScope來防止使用者透過Android back按鍵或是iPhone的向右滑回到上一頁，但因為我們也不需要保留這個頁面，所以選擇這個方法。