How to use Flutter Cupertino Icons? - dart

I know that to use them you have to import 'package:flutter/cupertino.dart';and use it like this Icon(CupertinoIcons.info); but it's hard to pick needed icon.
Dear Flutter team, please make complete Cupertino icons reference somewhere. One place has names without icons and other has icons without names.
UPDATE:
As Mariano noted and as shown in this answer name mapping is not yet complete and we can use icons as follows:
const IconData baseball = const IconData(0xf3dd,
fontFamily: CupertinoIcons.iconFont,
fontPackage: CupertinoIcons.iconFontPackage);
Icon(baseball);
Where 0xf3dd is a code of an icon (f3dd) which you can find here.

You answered your own question, the usage of the CupertinoIcons class is as you described.
You are right though, there is no easy way to find the name of the icon from the map image provided in the github repository, since they don't directly map the system icons described by Apple in their human interface guidelines: Human interface guidelines
You can go to the main flutter repository and open an issue about this subject Flutter Github repo. You could even contribute the map yourself and help other developers that might be having the same issue.

Related

Flutter and Material design 2

Is there some chance to use Material Design 2 in Flutter?
I can't find any informations about this on official website.
For Android app are informations here: https://material.io/develop/android/
Even though you shouldn't completely copy Google's design, you can of course use some tweaks ;) Here are some I would recommend:
The package rounded_modal
Using splashFactory: InkRipple.splashFactory in your Theme, aswell as setting the highlightColor: Colors.transparent
Having the app bar the same color as the Scaffold background with no elevation (I would recommend a CustomScrollView)
Using BottomNavigationBar instead of a Drawer
Actually, a "Material Design 2.0" does not exist. It is just Google's personal version of Material Theming, which every brand should do for it's own design.
So I wouldn't recommend just copying Google's design standarts, come up with something creative by yourself ;)
All the components from material.io can be implemented and customized in Flutter with ease, just look up the documentation for the specified component.
The material design components in Flutter can be explored here: material.io's Flutter specific site

iOS equivalent to a stylesheet?

HTML has CSS styles e.g. class="styleName"
Windows8/XAML has static style resources e.g. Style="{StaticResource styleName}"
Android has style tags e.g. style="#style/styleName"
iOS has ???
I'm using the interface builder for iOS in Xcode, how do I start to build up a style set or equivalent to styles? I want the ability to apply 'styles' to elements and then if I update that style's properties, the changes are applied to all elements that have been given that style. Is this possible in iOS development? Can someone please enlighten me as to how this is achieved or the equivalent please in iOS development. I'm very new to iOS development as you can see.
Is it more related to skins or themes? I don't have a clue.
There's Appearence. You often see this being used for colours, but it also does fonts, sizes, and a few other things. Here's another good article from a well known source.
Additionally, a common way to style/'skin' is by having different sets of background/button/... images.
You can also style by parameterizing drawing code. Have a look at the fabulous tool PaintCode.
Then, some companies do (part of the) UI in HTML/JavaScript.
Another thing to mention in this context is iOS' Auto Layout
You can do this with MarkupKit. See the section in the README entitled "Template Properties".
There isn't a good API in UIKit for this, unfortunately, but there are third party solutions with various tradeoffs.
I created a library that uses style classes, like CSS, which you can define in code, or inside a JSON file, and then apply to views in your app. As an extra benefit, the library uses #IBDesignable to live render your styles inside Storyboards without having to compile the app first to see the results.
https://github.com/daniel-hall/Stylish

Override Phonegap default splash screen using jquery mobile

I use jQuery Mobile with HTML5 and CSS3.
When I upload my code to PhoneGap cloud build servers and place the app on my iPhone and start the app, I see the following splashscreen:
The question now is: how can I override this image?
Do note: I'm not using a regular phonegap project (e.g. in Visual Studio), but just an index.html file with js and css files.
Thanks!
You can get some valuable information from here. This is from official Phonegap team. Also you can look into this too.
Hope it helped you.
Apple now requires a splash image. So if you don't include one in your config file on Phonegap Build, then the compiler inserts that ugly default version for you. So the solution is to make sure that you use your own custom splash image and specify that custom image with appropriate settings in the config file. You should be fine after that.
https://build.phonegap.com/blog/new-apple-app-store-submittal-rules
If a splash screen is not found in your package the PhoneGap default
image will be used, so be sure to include your splash screen in all
the required dimensions for your device. Apple has a handy guide to
these dimensions here.

iOS calculator project free to include in apps?

I'm wondering if anyone knows of any existing calculator project or library that has a basic calculator view I can push into a navigation stack. So far I haven't found anything that doesn't look like junk.
You should find everything you need there :
http://code.google.com/p/hpcalc-iphone/
http://blog.itopchiyev.com/2008/10/09/hello-iphone/
http://chris-software.com/index.php/2009/04/25/simple-calculator/
https://github.com/rargulati/Simple-Obj-C-Calculator
http://code.google.com/p/obj-c-calculator/source/browse/?r=30#svn%2Fbranches%2FCalculator%20at%20Assignment%201%253Fstate%253Dclosed
http://www.iphonedevx.com/?p=694
You would probably have to adapt some of these in a final app. Check for copyrights, and if one get your heart but cannot be included in your project (do not hesitate to contact the authors, really), rewrite yours from scratch with that inspiration source.
Check out iPhoneCalculator on GitHub, or search for it by keyname.

Integrating phoneGap with native iOS app

i'm trying to create an app which uses the combination of native functionality and the phoneGap framework. The native app has a button, upon the click of which the phoneGap ui has to be added to the view. Is there any way to achieve this? Are there any tutorials for the same?
Yes, this is possible. Although you might be getting yourself into some headaches. My app kind of goes the other way around, it's mostly phonegap, but occasionally i'll pop open a view that is native. Here is the link to code that shows an excellent example of how to switch between the iOS and phonegap worlds.
new updated recommended article (see update below)
These files represent a standard plugin used in phonegap. In this particular plugin, a native view is opened on top of a phonegap view. Notice you have a custom xib and everything. This plugin can be modified to display any xib with any functionality you could think of.
If you implement this plugin you will easily see how to jump back and forth. I've successfully heavily modified these classes to add LOTS of native capabilities to my phonegap project. Also you should probably check out the official phonegap guide to phonegap plugins. Here
Important Edit
Was informed original linkwas broken (not terribly surprised as this answer is very old and i've long since moved away from Phonegap) so I replaced the original link with an article that shows how to do these plugins well. In the article it explains the link is broken and gives several links where these older files are maintained, but in fact those are broken as well. Here is a branch of one of them I found that still hosts the original files on an "archive" branch. But I haven't investigated whether these files are wildly different from my original work. Good luck!
That's not how Phonegap is meant to be used.
To achieve what you are asking for you just need to create a Phonegap app and add the extra native functionality by writing a Phonegap plugin in Objective-C. You may add as much native code as you want.
I'm actually wanting to do the same thing as the original poster. Theoretically it would be comparatively easy, but non-trival to do. I'd love it if there was a PhoneGapView that one could integrate into an existing project. Bonus points if said PhoneGapView could be integrated in Interface Builder as a re-sizeable and re-positional object, basically think of it as an Object that extends UIWebView.
This is wishful thinking on my part seeing as this is how the higher-ups want my project.

Resources