CupertinoPageScaffold<\/span>\u00a0layout structure.<\/p>\nimport 'package:flutter\/cupertino.dart';\r\n\r\nclass HomeView extends StatefulWidget {\r\n\r\n @override\r\n\r\n _HomeView createState() => _HomeView();\r\n\r\n}\r\n\r\nclass _HomeView extends State<HomeView> {\r\n\r\n @override\r\n\r\n Widget build(BuildContext context) {\r\n\r\n return new CupertinoPageScaffold(navigationBar: _navBar(), child: DefaultTextStyle(style: CupertinoTheme.of(context).textTheme.textStyle, child: new Container()));\r\n\r\n }\r\n\r\n Widget _navBar() {\r\n\r\n return CupertinoNavigationBar(previousPageTitle: \"Home\", middle: Text(\"Home\"));\r\n\r\n }\r\n\r\n}<\/pre>\nAfter placing the\u00a0CupertinoTabBar<\/span>,\u00a0CupertinoNavigationBar<\/span>\u00a0widgets inside the\u00a0CupertinoTabScaffold<\/span>\u00a0and CupertinoPageScaffold<\/span>\u00a0layout structure, the Flutter app looks like this:<\/p>\n![\"TabBar\"](\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/03\/Flutter-iOS-1.png\")
<\/p>\n
<\/span>Navigation<\/span><\/h3>\nTo add navigation options, eg. pushing a screen with the name „\/detail“<\/span>\u00a0to our stack, we can use following method.<\/p>\nNavigator.of(context).pushNamed('\/detail');<\/pre>\nTo pop this screen we can use.<\/p>\n
Navigator.of(context).pop();<\/pre>\nWe can add all the routes we want to use in our main.dart<\/span>\u00a0file.<\/p>\nroutes: <String, WidgetBuilder> {\r\n\r\n '\/detail': (BuildContext context) => new DetailView()\r\n\r\n},<\/pre>\n<\/span>UIBarButtonItem<\/span><\/h3>\nIn iOS we can add UIBarButtonItems<\/span>\u00a0to our navigation bar on the right\/left as rightBarButtonItem<\/span>\u00a0or leftBarButtonItem<\/span>. In Flutter we can add a CupertinoButton<\/span>\u00a0as trailing<\/span>\u00a0to our navigation bar to achieve a similar look to a rightBarButtonItem<\/span>.<\/p>\nWidget _rightBarButtonItem() {\r\n\r\n return CupertinoButton(child: Icon(CupertinoIcons.info), onPressed: () {});\r\n\r\n}\r\n\r\nWidget _navBar() {\r\n\r\n return CupertinoNavigationBar(previousPageTitle: \"Home\", middle: Text(\"Home\"), trailing: _rightBarButtonItem());\r\n\r\n}<\/pre>\n<\/span>UIAlertController<\/span><\/h3>\nIn iOS we can show additional information with an UIAlertController<\/span>. There are two possible styles: actionSheet<\/span>\u00a0and alert<\/span>. In Flutter we have the CupertinoAlertDialog<\/span>\u00a0and CupertinoActionSheet<\/span>\u00a0widgets which can do this job. The following example opens a CupertinoAlertDialog<\/span>\u00a0when we are pressing the rightBarButtonItem<\/span>\u00a0in our navigation bar.<\/p>\nWidget _rightBarButtonItem(BuildContext context) {\r\n\r\n return CupertinoButton(child: Icon(CupertinoIcons.info), onPressed: () {\r\n\r\n showCupertinoDialog(context: context, builder: (context) { return _alert(context); });\r\n\r\n });\r\n\r\n}\r\n\r\nWidget _alert(BuildContext context) {\r\n\r\n return CupertinoAlertDialog(title: Text('Info'), content: Text('This is an information text.'), actions: <Widget>[new CupertinoButton(child: Text(\"OK\"), onPressed: () {\r\n\r\n Navigator.pop(context);\r\n\r\n })],);\r\n\r\n}<\/pre>\nwe can show an action sheet with a smiliar procedure. We have to use showCupertinoModalPopup<\/span>\u00a0instead of showCupertinoDialog<\/span>\u00a0and instead of a content field\u00a0we only have\u00a0actions<\/span>\u00a0and cancelButton<\/span>.<\/p>\nWidget _rightBarButtonItem(BuildContext context) {\r\n\r\n return CupertinoButton(child: Icon(CupertinoIcons.info), onPressed: () {\r\n\r\n showCupertinoModalPopup(context: context, builder: (context) { return _actionSheet(context); });\r\n\r\n });\r\n\r\n}\r\n\r\nWidget _actionSheet(BuildContext context) {\r\n\r\n return CupertinoActionSheet(title: Text(\"Title\"),\r\n\r\n actions: <Widget>[new CupertinoButton(child: Text(\"Option 1\"), onPressed: () {}), new CupertinoButton(child: Text(\"Option 2\"), onPressed: () {})],\r\n\r\n cancelButton: new CupertinoButton(child: Text(\"Cancel\"), onPressed: () {}));\r\n\r\n}<\/pre>\n![\"Alert\"](\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/03\/Flutter-iOS-2.png\")
![\"Alert\"](\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/03\/Flutter-iOS-3-575x1024.png\")
<\/h3>\n<\/span>UIWebView\/SFSafariViewController<\/span><\/h3>\nWe can integrate a\u00a0UIWebView<\/span>\u00a0with the webview_flutter<\/span>\u00a0package.\u00a0The simplest implementation is to create a WebView<\/span>\u00a0widget with the parameter initialUrl<\/span>\u00a0which is added as a child to CupertinoPageScaffold<\/span>.<\/p>\n@override\r\n\r\nWidget build(BuildContext context) {\r\n\r\n return new CupertinoPageScaffold(navigationBar: _navBar(context), child: DefaultTextStyle(style: CupertinoTheme.of(context).textTheme.textStyle, child: SafeArea(child: _webView())));\r\n\r\n}\r\n\r\nWidget _webView() {\r\n\r\n return WebView(initialUrl: 'https:\/\/www.inovex.de');\r\n\r\n}<\/pre>\nInstead of embedding web content we can open it in an external controller such as\u00a0SFSafariViewController<\/span>. To do so we can use the url_launcher<\/span>\u00a0package.<\/p>\n_launchURL() async {\r\n\r\n const url = 'https:\/\/www.inovex.de';\r\n\r\n if (await canLaunch(url)) {\r\n\r\n await launch(url);\r\n\r\n } else {\r\n\r\n throw 'Could not launch $url';\r\n\r\n }\r\n\r\n}<\/pre>\n![\"WebView\"](\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/03\/Flutter-iOS-4-575x1024.png\")
![\"WebView\"](\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/03\/Flutter-iOS-5-575x1024.png\")
<\/p>\n
<\/span>UITableView<\/span><\/h3>\nIn iOS we use UITableView<\/span>\u00a0to display the content using rows arranged in a single column. We have datasource and delegate methods for UITableView: datasource<\/em> to provide data that controls the state of the table view and delegate<\/em> controls how to use the data and manages interactions. In Flutter instead of a table view there is ListView<\/span>.\u00a0<\/em>It takes a list of children and displays them in the\u00a0<\/i>scroll\u00a0direction.<\/p>\nWidget _listView() {\r\n\r\nreturn ListView.builder(\r\n\r\n itemCount: itemCount,\r\n\r\n itemBuilder: (context, position) {\r\n\r\n return listItem();\r\n\r\n },\r\n\r\n)\r\n\r\n}\r\n\r\n<\/pre>\n<\/span>More Cupertino Widgets<\/span><\/h3>\nThere are a lot of more iOS widgets in the cupertino design package. In the following example we are using UISwitch<\/span>, UISlider<\/span>\u00a0and UISegmentedControl<\/span>\u00a0as well as an\u00a0MKMapView<\/span>\u00a0-like component from the map_native<\/span>\u00a0package.<\/p>\n\/\/ UISwitch\r\n\r\nWidget _switch() {\r\n\r\n return CupertinoSwitch(value: true, onChanged: (value) {});\r\n\r\n}\r\n\r\n\/\/ UISlider\r\n\r\nWidget _slider() {\r\n\r\n return CupertinoSlider(value: 0.5, onChanged: (value) {});\r\n\r\n}\r\n\r\n\/\/ UISegmentedControl\r\n\r\nWidget _segmentedControl() {\r\n\r\n return CupertinoSegmentedControl(children: children, onValueChanged: (value) {});\r\n\r\n}\r\n\r\n\/\/ MKMapView\r\n\r\nvar _mapView = new MapView(initialLocation: const LatLong(49.006889, 8.403653));\r\n\r\n@override\r\n\r\nWidget build(BuildContext context) {\r\n\r\n return CupertinoPageScaffold(navigationBar: _navBar(context), child: SafeArea(child: _mapView));\r\n\r\n}\r\n\r\nWidget _navBar(BuildContext context) {\r\n\r\n return CupertinoNavigationBar(previousPageTitle: \"User\", middle: Text(\"User\"));\r\n\r\n}<\/pre>\n![\"MoreCupertinoWidgets\"](\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/03\/Flutter-iOS-8-575x1024.png\")
![\"Map\"](\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/03\/Flutter-iOS-7-575x1024.png\")
<\/p>\n
<\/span>Good to know<\/span><\/h2>\nIn the next step we want to look at a few specific things needed in almost every iOS project. We want to execute native swift code, add our own pods to the CocoaPods installation created by Flutter and we want to take a quick look at fastlane integration.<\/p>\n
<\/span>Execute Native Swift Code<\/span><\/h3>\nWhen we want to execute Swift Code from Flutter we can do so with a FlutterMethodChannel<\/span>. In our next example we are getting the device information, once with Swift passing to Flutter and once with the device_info<\/span>\u00a0plugin directly. When we create a flutter project, flutter is automatically adding a CocoaPods installation to our Xcode project and is managing its own dependencies with it.<\/span><\/p>\n<\/span>Adding a pod to the Flutter CocoaPod installation<\/span><\/h3>\nWe can simply add our own pod by adding it to the Podfile<\/span>\u00a0in the iOS subfolder. In the following example we added the pod ‚Device‘<\/span>.<\/p>\n...\r\n\r\ntarget 'Runner' do\r\n\r\n use_frameworks!\r\n\r\n pod \"Device\"\r\n\r\n # Prepare symlinks folder. We use symlinks to avoid having Podfile.lock\r\n\r\n # referring to absolute paths on developers' machines.\r\n\r\n system('rm -rf .symlinks')\r\n\r\n system('mkdir -p .symlinks\/plugins')\r\n\r\n ...<\/pre>\nWe need to add the following lines to\u00a0Debug.xcconfig<\/span>\u00a0and Release.xcconfig<\/span>\u00a0so that Xcode can find the added pods.<\/p>\n#include \"Pods\/Target Support Files\/Pods-Runner\/Pods-Runner.debug.xcconfig\"<\/pre>\n#include \"Pods\/Target Support Files\/Pods-Runner\/Pods-Runner.release.xcconfig\"<\/pre>\n<\/span>Method channels in Swift<\/span><\/h3>\nAfter this we can add\u00a0a FlutterMethodChannel<\/span>\u00a0in our AppDelegate by adding it\u00a0in applicationDidFinishLaunchingWithOptions<\/span>. The name „samples.inovex.com\/native“\u00a0identifies the channel. The binaryMessenger is a facility for sending raw messages to Flutter.<\/p>\nlet controller: FlutterViewController = window?.rootViewController as! FlutterViewController\r\n\r\nlet nativeChannel = FlutterMethodChannel(name: \"samples.inovex.com\/native\", binaryMessenger: controller)<\/pre>\nWe need to add a method call handler to our