Flutter-watchtips - Flutter App (Embedded Watch Kit app with iOS version)

Overview

watchtips

Update Version 2.2

The Watch tips project has been updated again, The interface has been tidied up and a seperate value for the tip cost has been added and displayed ( a requested update). I have also added a custom 'keypad' rather than using the standard one available for the platform, hopefully the app now looks a bit better than it did - UX/UI design is not my strong point.

But the biggest update is that there is now also an Android version (without Watch support). Doing this has helped a lot as I can use the Flutter Android app for development purposes so that I now have Hot Reload back (development is good again ....)

For iOS, I still need to run/build (and fail) with the Flutter tools for iOS (this is required to generate the correct build scripts) and finish with XCode, but general dev is know easier.

Overview

This was an originally experiment to see if can use Flutter to build an iOS app with an accompanying watchOS app. My first attempts using the beta product were not successful so the idea was parked. Having now re-visited this I can now get a compiled blank watch app up and running with a Flutter app, so I will, in stages, try and re-create the WatchTips app using Flutter.

If you interested in the original Titanium version is here

Watch App

App Store Link

Ths app is a really simple app and originally just created as a proof point.

But for anyone interested here are the release links:

Plan

  • 1.0 Create a vanilla Flutter app (this initial commit)
  • 1.1 Add a blank watch project and get it working
  • 1.2 Modify the watch app functionally into WatchTips
  • 1.3 Update the Flutter app to WatchTips
  • 1.4 See if I can bridge between the 2 app (as the Titanium version does)
  • 2.0 Tidy up both the Flutter code and the iOS project and use it to submit the app into the App Store
  • 2.x+ - updates and improvements

Flutter Package Project

From the results of this test project, I have started developing a Flutter Package to allow communication between a Flutter iOS app and a watch app. This should allow easier integration with some standard functionality, though it is still a pain ATM as after you add a Watch Kit target to the iOS project as Flutter run/build no longer works. This means all package testing and development then needs to be done via XCode.

I have got messaging working from an iOS app to the watch via the plugin, this can be seen working in avideo here.

Generating a Distro build

The only way, so far, I have found of creating a distro build is following this seqence.

Set the Bundle ID

BEFORE adding the Watch Kit app target set the final bundle ID, as the Watch app and associated extension needs to use the same prefix. If not you may need to update all references BEFORE creating the final Archive.

Change ALL the Version and Build values

This MUST be done for each target (in this case 3), change them to $(FLUTTER_BUILD_NAME) and $(FLUTTER_BUILD_NUMBER) respectively, otherwise although the test runs work, the Archive will not unless the version numbers match.

Run the Flutter build first

This will fail, but it generates the correct shell scripts to enable iOS to carry out the build (flutter build ios --release).

Create Archive in XCode

  • 1 Select Generic Device + watchOS Device as the destination
  • 2 Run Product -> Archive
  • 3 If build successful , run the Validate App
  • 4 If validate successful - upload to App Store!!!

Versions

2.1

  • updated Watch and Phone UI
  • currency now defaults to the phone/ipad locale
  • package made universal, so it runs on iPad (no watch supoort)

2.0

  • first app store release

1.4 - Rough and Ready but Working!

I have now managed to add the required code into the iOS project to allow it to communicate with Flutter and send data updates from the watch so they are reflected in the app. Basically if you do a calculation for a Tip on the watch then the data is transferred to the associated device.

You need to forgive the (bad?) Objective C coding as it is not really my thing - who in their right mind thought of it in the first place anyway :-) . A lot of this was just brute force trial and error as well as a lot of searching and testing.

Apart from that the difficult issue for me was that although MethodChannel is quite well documented, EventChannel is not, the only examples I found were to do with Plugin extensions, but again probably due to my dislike (due to not understanding it very well) of Objective C.

I will try to create a generic plug-in later, but that will be done in Swift.

1.3

So after a bit of a hair pulling out session I have managed to get this working. I now have a iWatch app as well as a Flutter iOS app to build and run. I have tested this by building and distribuing to a physical phone via HockeyApp. Now the bad news......

I cannot use Flutter to either build the Flutter project or do the iOS release build, so I actually built the Flutter app in a seperate project then added the lib dir back into this one. This is a major pain as to do an testing, on device or simulator I need to use XCode to do all the build (i.e. no hot-reloading), but it does work.

To create the AD-HOC distro of the app I again used XCode, set the target to Generic Device and Archived the project. The resulting AD-OC signed app works well.

But I think the last stage will be a major hurdle as I WILL need to do all building using XCode.........

1.2

Updated Watch app and added functioning WatchTips. Watch app can now be used to calculate Bill split and tips.

1.1

After using XCode to define a simulator with an attached Watch Emulator the standard Vanilla app (from 1.0) was updated as follows

  • Set a bundle id on the iOS Runner app (u.spiralarm.watchtips)
  • Add a new Target in XCode (File->New->Target), a WatchKit app was selected
  • Untick Include Notification Scene and Include Complication
  • Name the product WatchTips
  • Generate 2 sets of assets (I use an app called Asset Catalog Creator), one for the Runner app and one for the Watch App so that both have a full set of icons.
  • Open the interface.storyboard for rhe WatchTips app and add a button to the screen

After this I can no longer user the IDE (VSC) to start the app up in debug mode as I get the following error ( perhaps some sort of cusom build configuration is required):

=== BUILD TARGET WatchTips Extension OF PROJECT Runner WITH CONFIGURATION Debug ===
target specifies product type 'com.apple.product-type.watchkit2-extension', but there's no such product type for the 'iphonesimulator' platform
Could not build the application for the simulator.
Error launching application on iPhone 7 with Watch 42mm.

However, if I use XCode I can use XCode to compile the app and run the watch app on the emulator.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

You might also like...

This is Stop Watch Timer for flutter plugin.🏃‍♂️

This is Stop Watch Timer for flutter plugin.🏃‍♂️

stop_watch_timer Simple CountUp timer / CountDown timer. It easily create app of stopwatch. https://pub.dev/packages/stop_watch_timer Example code See

Nov 9, 2022

a mobile app to search for information and watch movie, series and TV show trailers

inWatch Just a clean architecture app, to get trailers and informations of movies, series and TV shows, made with Getx, omdb API and Flutter sdk. The

Nov 10, 2022

Bringing back contex.read and context.watch for riverpod

This package brings back the context extensions for riverpod that were discontinued in version 1.0.0. To read any provider, do context.read(myProvider

Sep 28, 2022

watch it on YouTube

watch it on YouTube

Furniture App - Flutter UI Watch it on YouTube Packages we are using: flutter_svg: link goole_fonts: link Fonts Poppins link We design two pages one i

Dec 9, 2022

PsTube - Watch and download videos without ads

PsTube - Watch and download videos without ads

PsTube - Formerly FluTube Watch and download videos without ads Features Beautiful user interface Lightweight and fast No Login Required Keep your lik

Dec 21, 2022

A beautiful weather forecasting application built with the Flutter development kit. Available on Android and iOS.

A beautiful weather forecasting application built with the Flutter development kit. Available on Android and iOS.

Flutter Weather A beautiful weather forecasting application built with the Flutter development kit. Screenshots Analysis Run Application This project

Oct 17, 2022

Weibo@Flow - A third party Weibo client for Android with Material You theming (iOS version later). 💪 Powered by Flutter 💪

Weibo@Flow - A third party Weibo client for Android with Material You theming (iOS version later).  💪 Powered by Flutter 💪

Weibo@Flow - A third party Weibo client for Android with Material You theming (iOS version later). 💪 Powered by Flutter 💪

Sep 19, 2022

Face detection app built with Flutter and Firebase ML Kit

Face detection app built with Flutter and Firebase ML Kit

Flutter Face Detection Flutter Face Detection with Firebase ML Kit and CustomPainter. Read the article on Medium Made with 😍 by Akora-IngDKB. Follow

Sep 29, 2022

Free Laundry App Flutter UI Kit

Free Laundry App Flutter UI Kit

🔥 🔥 Laundry App Flutter UI Kit 🔥 🔥 💫 ⭐️ ⭐️ 👨‍💻 Free Flutter UI Kits based

Jul 11, 2022
Comments
  • WatchOS App Store Publishing Question (bitcode)

    WatchOS App Store Publishing Question (bitcode)

    Hi There,

    Thanks for sharing this project :). I'm in the process of rewriting one of my apps to Flutter and also want to add a WatchOS app but after some searching I discovered that WatchOS requires bitcode support to publish it and I stumbled upon this issue which states bitcode is not yet supported: https://github.com/flutter/flutter/issues/15288 Did you manage to publish the app even without bitcode or am I missing something obvious?

    Thanks!

    opened by cuberob 2
  • Question: Would this still work with the latest flutter versions?

    Question: Would this still work with the latest flutter versions?

    Hi @magnatronus,

    I love the idea of this working, but wanted to see if this would still work with recent flutter versions?

    Thanks for this cool project!

    opened by dbi1 1
  • Flutter plugin progress

    Flutter plugin progress

    Hello.

    I found your solution to building WatchOS apps that communicate with Flutter and I love it, great job! I also noticed that you mentioned creating a Flutter plugin that could provide communication functionalities betwen Flutter and WatchOS here https://butterfly-mobile.uk/flutter-and-apple-watch#page-content I would love to use such plugin if there is any version available for testing let me know. Thanks.

    opened by bdkbdk123 1
Releases(2.2)
Owner
Steve Rogers
Developer of all things NodeJS and mobile (Google Flutter)
Steve Rogers
A starter kit for beginner learns with Bloc pattern, RxDart, sqflite, Fluro and Dio to architect a flutter project. This starter kit build an App Store app as a example

Flutter Starter Kit - App Store Example A starter kit for beginner learns with Bloc pattern, RxDart, sqflite, Fluro and Dio to architect a flutter pro

kw101 678 Jan 8, 2023
Ml kit ocr - Plugin which provides native ML Kit OCR APIs

MLKit OCR Plugin which provides native ML Kit OCR APIs Requirements Android Set

Madhav tripathi 0 Aug 3, 2022
Boris Gautier 1 Jan 31, 2022
Android l iOS mobile app that suggest random movies to watch 🍿

movirand A cross-platfrom mobile app that suggest random movies to watch Getting Started This project is a starting point for a Flutter application. A

Mhamed Ajjig 5 Jan 2, 2023
A simple way to share Instagram stories as an embedded feature within the Flutter application

Loopi Share A simple way to share Instagram stories as an embedded feature within the Flutter application. Introduction Words on both platforms Androi

Loopi 5 Sep 24, 2022
Smart Chessboard - For our project we would like to use a mix of AI and embedded systems.

Table of Contents Overview Usage How To Build How To Run Diagrams Dependencies Overview For our project we would like to use a mix of

Shaheriar Malik 3 Mar 24, 2022
A Flutter App To Watch Anime Online With No Ads

Tako Play A Mobile App to Watch Anime With No ADS !! . Please Do not put Tako-Pl

Kaung Satt Hein 133 Dec 22, 2022
Arispewdie - Flutter app to watch LIVE subscriber count of PewDiePie vs T-Series

PewDiePie VS T-Series Flutter app to watch LIVE subscriber count of PewDiePie vs

Behruz Hurramov 1 Jan 10, 2022
Flutter watch app ui design

Flutter-watch-app-ui-design A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get

Md.Hamid Hosen 0 Mar 18, 2022