diff --git a/src/content/add-to-app/ios/add-flutter-screen.md b/src/content/add-to-app/ios/add-flutter-screen.md index 480e3ae166c..a0bcdf0e10f 100644 --- a/src/content/add-to-app/ios/add-flutter-screen.md +++ b/src/content/add-to-app/ios/add-flutter-screen.md @@ -766,6 +766,70 @@ you're free to push data or prepare your Flutter environment in any way you'd like, before presenting the Flutter UI using a `FlutterViewController`. +## Content-sized views + +On iOS, you can also set your embedded `FlutterView` to size itself based off its content. + + + + +```swift +let flutterViewController = FlutterViewController(engine: engine, nibName: nil, bundle: nil) +flutterViewController.isAutoResizable = true +``` + + + + +```objc +_flutterViewController = [[FlutterViewController alloc] initWithEngine:engine nibName:nil bundle:nil]; +_flutterViewController.autoResizable = true; +``` + + + + +### Restrictions + +Since content-sized Flutter views require your Flutter app to be able to size itself, +some widgets are not supported. + +* Widgets with unbounded size, like a `ListView`. +* Widgets that defer to its child for the size, like `LayoutBuilder`. + +In practice, this means that quite a few common widgets are not supported, +such as `ScaffoldBuilder`, `CupertinoTimerPicker`, +or any widget that internally relies on a `LayoutBuilder`. +When in doubt, you can use an `UnconstrainedBox` to test the usability of +a widget for a content-sized view, as in the following example: + +```dart +import 'package:flutter/material.dart'; + +void main() => runApp(MyApp()); + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) + => MaterialApp(home: MyPage()); +} + +class MyPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + body: UnconstrainedBox( + // TODO: Edit this line to check if a widget + // can cause problems with content-sized views. + child: Text('This works!'), + // child: Column(children: [Column(children: [Expanded(child: Text('This blows up!'))])]), + // child: ListView(children: [Text('This blows up!')]), + ) + ); + } +} +``` +For a working example, refer to this [sample project][]. [`FlutterEngine`]: {{site.api}}/ios-embedder/interface_flutter_engine.html [`FlutterViewController`]: {{site.api}}/ios-embedder/interface_flutter_view_controller.html @@ -785,6 +849,7 @@ in any way you'd like, before presenting the Flutter UI using a [`WidgetsApp`]: {{site.api}}/flutter/widgets/WidgetsApp-class.html [`PlatformDispatcher.defaultRouteName`]: {{site.api}}/flutter/dart-ui/PlatformDispatcher/defaultRouteName.html [Start a FlutterEngine and FlutterViewController section]:/add-to-app/ios/add-flutter-screen/#start-a-flutterengine-and-flutterviewcontroller -[`Observable`]: https://developer.apple.com/documentation/observation/observable -[`NavigationLink`]: https://developer.apple.com/documentation/swiftui/navigationlink -[`Observable()`]: https://developer.apple.com/documentation/observation/observable() +[`Observable`]: {{site.apple-dev}}/documentation/observation/observable +[`NavigationLink`]: {{site.apple-dev}}/documentation/swiftui/navigationlink +[`Observable()`]: {{site.apple-dev}}/documentation/observation/observable() +[sample project]: {{site.repo.samples}}/tree/main/add_to_app/ios_content_resizing