Flutter for Xamarin.Forms developers

This document is meant for Xamarin.Forms developers looking to apply their existing knowledge to build mobile apps with Flutter. If you understand the fundamentals of the Xamarin.Forms framework, then you can use this document as a jump start to Flutter development.

Your Android and iOS knowledge and skill set are valuable when building with Flutter, because Flutter relies on the native operating system configurations, similar to how you would configure your native Xamarin.Forms projects. The Flutter Frameworks is also similar to how you create a single UI, that is used on multiple platforms.

This document can be used as a cookbook by jumping around and finding questions that are most relevant to your needs.

For each platform in Xamarin.Forms, you call the LoadApplication method, which creates a new application and starts your app.

LoadApplication(new App());

In Flutter, the default main entry point is main where you load your Flutter app.

void main() {
  runApp(const MyApp());
}

In Xamarin.Forms, you assign a Page to the MainPage property in the Application class.

public class App : Application
{
    public App()
    {
        MainPage = new ContentPage
        {
            Content = new Label
            {
                Text = "Hello World",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            }
        };
    }
}

In Flutter, "everything is a widget", even the application itself. The following example shows MyApp, a simple application Widget.

class MyApp extends StatelessWidget {
  /// This widget is the root of your application.
  const MyApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Hello World!', textDirection: TextDirection.ltr),
    );
  }
}

Xamarin.Forms has many types of pages; ContentPage is the most common. In Flutter, you specify an application widget that holds your root page. You can use a MaterialApp widget, which supports Material Design, or you can use a CupertinoApp widget, which supports an iOS-style app, or you can use the lower level WidgetsApp, which you can customize in any way you want.

The following code defines the home page, a stateful widget. In Flutter, all widgets are immutable, but two types of widgets are supported: Stateful and Stateless. Examples of a stateless widget are titles, icons, or images.

The following example uses MaterialApp, which holds its root page in the home property.

class MyApp extends StatelessWidget {
  /// This widget is the root of your application.
  const MyApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

From here, your actual first page is another Widget, in which you create your state.

A Stateful widget, such as MyHomePage below, consists of two parts. The first part, which is itself immutable, creates a State object that holds the state of the object. The State object persists over the life of the widget.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
​