Overview

Feedback

The live examples use Material 3 styling which is currently behind a feature flag. See useMaterial3 for more info. The next stable release of Flutter is expected to make Material 3 the default.

Widgets from Amplify UI are built using Material widgets. This means that all Amplify UI widgets will inherit the MaterialApp's ThemeData. Any customizations you make to the app's ThemeData will be reflected in the Amplify UI widgets.

Getting started

Step 1: Wrap your app's MaterialApp widget with the Authenticator widget, and set MaterialApp's builder to Authenticator.builder():

@override
Widget build(BuildContext context) {
  // Wrap your MaterialApp app in the Authenticator widget
  return Authenticator(
    child: MaterialApp(
      // Set builder to Authenticator.builder() to protect all routes
      builder: Authenticator.builder(),
      home: const Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  );
}

Step 2: Use the theme to style widgets

@override
Widget build(BuildContext context) {
  return Authenticator(
    child: MaterialApp(
      // set the default theme
      theme: ThemeData.from(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.red,
          backgroundColor: Colors.white,
        ),
      ).copyWith(
        indicatorColor: Colors.red,
      ),
      // set the dark theme (optional)
      darkTheme: ThemeData.from(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.red,
          backgroundColor: Colors.black,
          brightness: Brightness.dark,
        ),
      ),
      // set the theme mode to respond to the user's system preferences (optional)
      themeMode: ThemeMode.system,
      builder: Authenticator.builder(),
      home: const Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  );
}

Overview

Getting started

Material widgets

Form Fields & Buttons

Dialogs & Banners

Other Widgets