A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

Related tags

Templates cupertinew
Overview

cupertinew

style: very good analysis License: MIT

⚠️ Experimental and work in progress ⚠️

A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

By Jeroen Meijer and Reuben Turner.

About the Cupertinew project

Last updated: 2021-09-28

Reasoning

Cupertinew is a Flutter project that spawned out of a desire to create a set of pixel-perfect iOS-styled components and properties for Flutter.

While support for widgets following Material Design is absolutely stellar and offers a lot of flexibility, we feel like the current iOS component support in Flutter is severely lacking in some parts, ranging from components and scaffolding that have been available since iOS 13 (which is 2 versions behind at the time of writing) that still have not been added, existing components being out of date, and navigation paradigms that are either completely unavailable or are implemented in a package (on pub.dev) with poor code quality or support.

Goals

Our goals are therefore to start creating iOS components and features that are indestinguishable from their native counterparts, allowing all Flutter devs, both new and old, to be able to create Flutter applications that look and feel like native iOS apps.

There are some examples of iOS-styled Flutter apps, such as the official Veggie Seasons sample app. However, the components used are prodominantly custom to the project, and are not available in the official Flutter SDK. Additionally, most of the components are not pixel-perfect, and feel (sometimes heavily) outdated.

We want to help out in creating a better iOS-feeling experience for Flutter developers. We love Dart, we love Flutter, we love iOS, and we would especially love to be able to combine the best of all these in a way that is easy to use, and that is not only pixel-perfect, but also maintainable, and well tested.

But why not just contribute to the official Flutter SDK?

That is definitely our end goal, but we feel that the current Flutter SDK is not the best place to start.

At this point, we only have some ideas, ambitions and short-term plans, and this whole project spawned out of the fact that we were simply missing some components. We need time to gather our thoughts and get a plan in place, and we need to get the community involved.

First and foremost, we would like to get our goals aligned, gather data and feedback, get a group of people together, and start working on the project.

Roadmap

Our current roadmap is extremely rough and we are working on it -- the project only just started, after all.

In the meantime, please have a look at the project board and issue #1 for more details.

How can I contribute?

First off, thank you so much for asking! ❤️

Since we are still working out the details, we would like to ask you to hold off on contributing to the project until we have a more solid roadmap. Please check back here in the future. Your patience and excitement is appreciated!

Comments
  • chore: prepare for initial pub release

    chore: prepare for initial pub release

    Description

    This PR prepares for the initial pub release by adding a license and fixing other pana related issues.

    Type of Change

    • [ ] ✨ New feature (non-breaking change which adds functionality)
    • [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
    • [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change)
    • [ ] 🧹 Code refactor
    • [ ] ✅ Build configuration change
    • [ ] 📝 Documentation
    • [x] 🗑️ Chore
    chore 
    opened by jeroen-meijer 1
  • chore: rename project to `cupertino_plus`

    chore: rename project to `cupertino_plus`

    EDIT: After a public poll and lengthy internal discussion, we have settled on cupertino_plus as the new name for this package.

    Task name

    rename to either loyola or san_jose

    Description

    Since "Cupertinew" wasn't intended to be this project's permanent name, I propose that we rename it to one of the following:

    1. loyola
    2. san_jose

    Both are cities that are adjacent to the city of Cupertino. Since the cupertino name itself is taken, and since our project is adjacent to cupertino, I think it is appropriate that we use the name of a city adjacent to the city of Cupertino.

    Other comments

    No response

    proj chore 
    opened by GroovinChip 1
  • code refactor: theme updates

    code refactor: theme updates

    This PR makes a number of changes to the way theming is handled for cupertino_plus:

    • Overhaul CupertinoPlusTheme widget
      • Now takes a single CupertinoPlusThemeData argument
      • Removes the maybeOf function
    • Overhaul CupertinoPlusThemeData class
      • Now uses factory constructors
      • Adds Brightness property
      • Adds debugFillProperties
    • Removes unnecessary icons constructor
    • Adds 100% test coverage for all theme-related classes

    Description

    Type of Change

    • [ ] ✨ New feature (non-breaking change which adds functionality)
    • [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
    • [X] ❌ Breaking change (fix or feature that would cause existing functionality to change)
    • [X] 🧹 Code refactor
    • [ ] ✅ Build configuration change
    • [ ] 📝 Documentation
    • [ ] 🗑️ Chore
    opened by GroovinChip 0
  • chore: Update lockfile with new version

    chore: Update lockfile with new version

    Description

    Type of Change

    • [ ] ✨ New feature (non-breaking change which adds functionality)
    • [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
    • [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change)
    • [ ] 🧹 Code refactor
    • [ ] ✅ Build configuration change
    • [ ] 📝 Documentation
    • [X] 🗑️ Chore
    opened by GroovinChip 0
  • docs: add badge and links in README

    docs: add badge and links in README

    Description

    • docs: add missing badge and links in README

    Type of Change

    • [ ] ✨ New feature (non-breaking change which adds functionality)
    • [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
    • [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change)
    • [ ] 🧹 Code refactor
    • [ ] ✅ Build configuration change
    • [x] 📝 Documentation
    • [ ] 🗑️ Chore
    opened by jeroen-meijer 0
  • chore: rename project to cupertino_plus

    chore: rename project to cupertino_plus

    Description

    This PR renames the project to Cupertino Plus (cupertino_plus) by changing every instance of "cupertinew" to the appropriately cased/spaced version of "cupertino_plus".

    Closes #5.

    Type of Change

    • [ ] ✨ New feature (non-breaking change which adds functionality)
    • [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
    • [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change)
    • [ ] 🧹 Code refactor
    • [ ] ✅ Build configuration change
    • [ ] 📝 Documentation
    • [x] 🗑️ Chore
    proj chore 
    opened by jeroen-meijer 0
  • feat: create common theming system

    feat: create common theming system

    Common Theming System

    Documentation URL

    Description

    In order to create common theming consistency and customizability for iOS (+ iPadOS) and macOS components, it is in our best interest to create a theme system (similar to Flutter's ThemeData and friends) to be able to create a consistent and native-feeling experience across platforms.

    Work has already begun on this system. The current implementation can be found here and the most recent development can be tracked in this branch (TBD).

    Other comments

    No response

    feat theming 
    opened by jeroen-meijer 2
  • [epic] feat(component): grouped list tiles

    [epic] feat(component): grouped list tiles

    Grouped List Tiles

    Documentation URL

    Tables - Views - iOS - Human Interface Guidelines - Apple Developer

    Description

    // TODO

    Mentioning @daemonloki to take a look at this and triage it into separate components (if necessary).

    Component tickets:

    • #...

    Screenshots

    iPhone

    | Light | Dark | | -- | -- | |Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 05 53|Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 07 01| |Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 06 00|Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 07 14| |Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 06 12|Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 07 19| |Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 06 21|Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 07 26| |Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 06 31|Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 07 39|

    iPad

    | Orientation | Light | Dark | | -- | -- | -- | | Portrait | Simulator Screen Shot - iPad Pro (11-inch) (3rd generation) - 2021-10-17 at 17 52 07 | Simulator Screen Shot - iPad Pro (11-inch) (3rd generation) - 2021-10-17 at 17 52 13 | Landscape | Simulator Screen Shot - iPad Pro (11-inch) (3rd generation) - 2021-10-17 at 17 48 07| Simulator Screen Shot - iPad Pro (11-inch) (3rd generation) - 2021-10-17 at 17 52 11 |

    Interactivity

    | State | Light | Dark | | -- | -- | -- | | Pressed (iPhone) | Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 26 02 | Simulator Screen Shot - iPhone 13 - 2021-10-17 at 17 25 46 | | Navigation | https://user-images.githubusercontent.com/14292245/137634489-fef42298-5bca-43b6-ac4e-52151f852b60.mp4 | https://user-images.githubusercontent.com/14292245/137634493-45d03544-fcea-40f5-a15c-6df3ecd036d4.mp4 | | Selected (iPad, portrait) | image | image |

    Other comments

    No response

    Checked the other issues?

    • [X] I have checked and verified this is the first request for this component.

    Code of Conduct

    • [X] I agree to cooperate in resolving this component request.
    triage feat component epic 
    opened by jeroen-meijer 0
  • feat: create native ios component gallery

    feat: create native ios component gallery

    Task name

    Create a native iOS component gallery.

    Description

    In order to properly be able to gather what components we want to build with a good degree of accuracy, it would be extremely helpful to have a native iOS component library gallery.

    We can use this app's contents (both the code as well as the visual aspect in runtime) as reference material when creating new iOS components in Flutter.

    Other comments

    We probably need an iOS dev to help us here. In the meantime, I can experiment with learning some SwiftUI and see how far we can get. 👀

    triage feat native-ios 
    opened by jeroen-meijer 1
  • proj: create roadmap

    proj: create roadmap

    Task name

    Create Roadmap

    Description

    In order to manage and index the work that needs to be done, I think it's a good idea to have a roadmap in mind.

    This currently involves the following:

    1. Meet with project owners and determine requirements.
    2. Write up action items based on requirements.
    3. Gather contributors who can help out.

    Other comments

    No response

    proj 
    opened by jeroen-meijer 0
Owner
Jeroen Meijer (Jay)
Call me Jay. Software Developer, passionate about TypeScript and Flutter, like to help out other people. Admin and maintainer for @fluttercommunity
Jeroen Meijer (Jay)
A pixel perfect dashboard for mobile, tablet and desktop.

A pixel perfect dashboard for mobile, tablet and desktop.

BotCoder 25 Dec 27, 2022
1000+ Pixel-perfect svg unicons for your next flutter project

flutter_unicons 1000+ Pixel-perfect svg unicons for your next flutter project ispired by Unicons and vue-unicons Demo Download the gallery here. Insta

charlot Tabade 23 Oct 9, 2022
Become an artist, pixel by pixel.

place Introduction This project was written as a support for my Medium article and is currently running on this website. Getting Started In order to b

Julien Duribreux 11 Dec 16, 2022
Basf flutter components - A BASF Flutter components library for iOS and Android

basf_flutter_components A BASF Flutter components library for iOS and Android In

BASF Mobile Solutions 7 Dec 15, 2022
A collection of templates to make new Flutter components using the Mason build tool.

Mason Flutter Templates A collection of templates to make new Flutter components using the Mason build tool. Setup in Project To use these templates i

Marcus Twichel 5 Jun 21, 2022
Build context - Access most used properties in your BuildContext instance.

Languages: English | Brazilian Portuguse BuildContext Access most used properties in your BuildContext instance. This package relies on Dart's extensi

Pedro Massango 132 Dec 11, 2022
Mixins is a package for shortening the use of some widgets or properties.

Usage It's not a great package, just help us to code briefly, everyone can make their own easily. To use this plugin, add mixins as a dependency in yo

Ashta 5 Nov 8, 2022
A simple sprite format for building 1bit styled graphics.

Mini Sprite Mini sprite is a simple, matrix based format for creating 1bit styled graphics. Project structure Mini Sprite is composed of several proje

Blue Fire 16 Dec 15, 2022
This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

Kitten Tricks This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support. It’s completely free

Akveo 7k Dec 30, 2022
Draw perfect freehand lines—in Flutter.

Draw perfect pressure-sensitive freehand lines. ?? A port of the perfect-freehand JavaScript library. Try out that demo. ?? Love this library? Conside

Steve Ruiz 186 Jan 2, 2023
Flutter themes consistent with GitHub's Primer style guidelines

primer_flutter Flutter themes consistent with Primer style guidelines DISCLAIMER: This project is not affiliated with the Primer or GitHub organizatio

Reuben Turner 6 Aug 24, 2022
Linter rules corresponding to the guidelines in Effective Dart

effective_dart This package is deprecated. Before it was deprecated, it was the way to provide analysis options corresponding to the guidelines in Eff

Honza Bittner 127 Dec 9, 2022
🔥🚀 Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations

Flutter PinPut From Tornike ?? ?? Flutter package to create Pin code input (OTP) text field with every pixel customization possibility ?? and beautifu

Tornike 451 Jan 2, 2023
Sharp looking Flutter applications with fractional device pixel ratios.

PixelSnap - Sharp looking applications at any pixel scaling factor If you have ever run a Flutter application on a system with non-integral pixel scal

null 63 Aug 14, 2023
Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

Flutter-Apps-Collection This is a repository of a collection of apps made in flutter for learning purpose Some Screenshots . . . Apps build in Flutter

Himanshu Singh 96 May 27, 2022
Following Along with a tutorial and adding differing customization to learn Dart and Flutter

flutter_ss_portfolio A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

Midnight 0 Nov 28, 2021
Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application Watch it on Youtube Previous Designs Checkout my Youtube channel Installation Please remember, after cloning this

Mohammad Rahmani 110 Dec 23, 2022
🚀 Sample Flutter Clean Architecture on Rorty App focused on the scalability, testability and maintainability written in Dart, following best practices using Flutter.

Rorty Flutter Rorty ?? (work-in-progress for V2 ?? ??️ ??‍♀️ ⛏ ) Getting Started Flutter Clean Architecture in Rorty is a sample project that presents

Mr.Sanchez 138 Jan 1, 2023
COVID-19 application made with Flutter, following Test Driven Development (TDD) and Clean Architecture along with Internationalization with JSON.

Covid App COVID-19 application made with Flutter, following Test Driven Development (TDD) and Clean Architecture along with Internationalization with

Sandip Pramanik 4 Aug 4, 2022