The "Frontend Monolith" is a real struggle. The solution? Microfrontends (MFEs).

In this guide, we won't just build a "Hello World" MFE. We are going to architect a production-grade system using React, Vite, and Module Federation. We will implement a specific, highly scalable pattern: Separating the UI Layer (the MFE) from the Data Layer (a Headless NPM package).

What are Microfrontends?

Microfrontends apply the "Microservices" concept to the frontend. Instead of one giant application, you break your website into smaller, independent applications (e.g., User Profile, Product Catalog, Cart).

The Problems They Solve:

1. Independent Deployment: Team A can deploy the "User Profile" MFE without waiting for Team B to finish the "Checkout" MFE.

2. Tech Stack Agnostic: Theoretically, one MFE could be React while another is Vue (though sticking to one framework is usually better for performance).

3. Scalability: Teams can work in parallel on separate repositories.

4. Incremental Upgrades: You can rewrite legacy code piece by piece.

The Architecture: The "Split-Layer" Pattern

Most MFE tutorials shove API calls, logic, and UI into one bundle. We are going to do better. We will split our MFE into two distinct layers managed in separate repositories:

1. The Data Layer (Headless): A TypeScript NPM package containing API clients, models, and business logic. It knows nothing about React or the DOM.

2. The UI Layer (The MFE): A React application that consumes the Data Layer to render the interface. It is exposed to the "Host" via Module Federation.

The High-Level Diagram

Part 1: The Headless Data Layer

This layer is the "brain." It handles data fetching and transformation. It is published as a private NPM package (e.g., to GitHub Packages) so both the MFE and potentially the Host can use it with type safety.

1. The Configuration Pattern (Inversion of Control)

The Data Layer shouldn't hardcode URLs or Auth tokens. It should ask for them. We use a configuration function.

// data-layer/src/config.ts
export interface DataLayerConfig {
  // The Host decides the API location
  apiBaseUrl: string;
  // The Host provides a way to get the CURRENT token
  getToken: () => string | null | undefined | Promise<string | null | undefined>;
}

let internalConfig: DataLayerConfig | null = null;

export const configureDataLayer = (config: DataLayerConfig) => {
  if (!config.apiBaseUrl || !config.getToken) {
    throw new Error("Invalid Data Layer Configuration");
  }
  internalConfig = config;
};

export const getConfig = () => internalConfig;

2. The Intelligent API Client

We create an Axios instance that "pulls" the token dynamically before every request. This handles token rotation automatically!

// data-layer/src/api/apiClient.ts
import axios from 'axios';
import { getConfig } from '../config';

// We defer instance creation until we have the Base URL
export const getApiClient = () => {
  const config = getConfig();
  if (!config) throw new Error("Data Layer not configured!");

  const instance = axios.create({
    baseURL: config.apiBaseUrl,
  });

  // Request Interceptor: The Secret Sauce
  instance.interceptors.request.use(async (reqConfig) => {
    // Call the function provided by the HOST to get the latest token
    const token = await Promise.resolve(config.getToken());
    if (token) {
      reqConfig.headers.Authorization = `Bearer ${token}`;
    }
    return reqConfig;
  });

  return instance;
};

Part 2: The UI Layer (React MFE)

We build this using Vite, which offers a fantastic plugin for Module Federation: @originjs/vite-plugin-federation.

1. Vite Configuration

We expose a bootstrap file. We don't just expose a component because we need to handle initialization (configuring the data layer) before rendering.

// ui-mfe/vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'my_app_ui_mfe',
      filename: 'remoteEntry.js',
      exposes: {
        // We expose a mount function, not just a component
        './bootstrap': './src/bootstrap.tsx',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
        'react-router-dom': { singleton: true }
      },
    }),
  ],
  build: {
    target: 'esnext', // Required for top-level await support in MF
  },
});

2. Styling Isolation

To prevent your MFE's CSS from breaking the Host app (and vice versa), use Tailwind CSS with a prefix.

// ui-mfe/tailwind.config.js
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  prefix: 'mfe-user-', // All classes will be .mfe-user-bg-red-500
  // ...
}

3. The Bootstrap Entry Point

This is the interface between the Host and the MFE. It accepts props, configures the Data Layer, and mounts the React app.

// ui-mfe/src/bootstrap.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { createHostedRouter } from './routes';
import { configureDataLayer } from '@your-org/my-app-data-layer';

// The Contract: What the Host must provide
export interface MountProps {
  config: {
    apiBaseUrl: string;
    getAuthToken: () => string | Promise<string | null>;
  };
  hostCallbacks?: {
    onNavigateRequest?: (path: string) => void;
    onHostEvent?: (event: string, payload: any) => void;
  };
  basename?: string;
}

const mount = (el: Element, props: MountProps) => {
  // 1. Configure the internal Data Layer with Host's values
  configureDataLayer({
    apiBaseUrl: props.config.apiBaseUrl,
    getToken: props.config.getAuthToken,
  });

  // 2. Initialize Router (MemoryRouter is best for MFEs)
  const router = createHostedRouter(props.basename);

  // 3. Render
  const root = ReactDOM.createRoot(el);
  root.render(
     <React.StrictMode>
        <RouterProvider router={router} />
     </React.StrictMode>
  );

  // 4. Return cleanup function
  return {
    unmount: () => root.unmount()
  };
};

export { mount };

Part 3: The Integration (The Host App)

The Host is the orchestrator. It provides the "Environment" (Auth, URL) and the "Container" (DOM Element).

1. Module Federation Config (Host)

Tell the host where to find the MFE.

// host/vite.config.ts (or webpack.config.js)
federation({
  name: 'host_app',
  remotes: {
    // The URL can be dynamic in production!
    my_app_ui_mfe: 'http://localhost:3001/assets/remoteEntry.js',
  },
  shared: { react: { singleton: true }, ... }
})

2. The MFE Loader Component

This component handles the dynamic import and the lifecycle of the MFE.

// host/src/components/MfeLoader.tsx
import React, { useEffect, useRef } from 'react';

// Helper to load the module dynamically
// In a real app, wrap this in React.Suspense
const MfeLoader = ({ mountProps }) => {
  const ref = useRef(null);

  useEffect(() => {
    let mfeInstance;

    const loadMfe = async () => {
      // Dynamic import matches the 'remotes' key and 'exposes' key
      const module = await import('my_app_ui_mfe/bootstrap');

      if (ref.current) {
        // Mount the MFE and pass the PROPS
        mfeInstance = module.mount(ref.current, mountProps);
      }
    };

    loadMfe();

    return () => {
      // Cleanup when Host unmounts this component
      mfeInstance?.unmount();
    };
  }, []); // Re-run if mountProps change deeply? Use caution.

  return <div ref={ref} />;
};

export default MfeLoader;

3. Using the MFE in the Host

This is where the magic happens. The Host passes its own Auth logic into the MFE.

// host/src/App.tsx
import React, { useCallback } from 'react';
import MfeLoader from './components/MfeLoader';
import { useAuth } from './hooks/useAuth'; // Host's Auth hook

function App() {
  const { getToken, logout } = useAuth();

  // The MFE calls this function before EVERY API request.
  // This ensures the MFE always uses the freshest token.
  const provideTokenToMfe = useCallback(async () => {
    return await getToken(); 
  }, [getToken]);

  const handleMfeEvent = (event, payload) => {
    if (event === 'authExpired') {
      logout(); // Host handles the logout!
    }
  };

  const mfeProps = {
    config: {
      apiBaseUrl: 'https://api.production.com/v1',
      getAuthToken: provideTokenToMfe, // Pass the function reference
    },
    hostCallbacks: {
      onHostEvent: handleMfeEvent
    }
  };

  return (
    <div className="host-layout">
      <h1>My Super App</h1>
      <div className="mfe-container">
        <MfeLoader mountProps={mfeProps} />
      </div>
    </div>
  );
}

Handling Errors & Communication

Standardized Errors

Your Data Layer should intercept 4xx/5xx errors and reject with a standardized DataLayerError object.

• MFE Responsibility: Catch DataLayerError. If it's a 401, emit an event to the host. If it's a 400, show a validation error in the UI.

• Host Responsibility: Listen for authExpired events and handle redirects.

The Fallback (Iframe)

If you ever need to run this MFE in an Iframe (e.g., legacy integration), Module Federation won't work.

• Host: Listen to window.postMessage.

• MFE: In your communication layer, check if window.top !== window.self. If so, send postMessage instead of calling the hostCallbacks prop.

Conclusion

By separating the Data Layer (Headless, Type-safe, Configurable) from the UI Layer (Visuals, Module Federation), and orchestrating them via a Host App that controls Authentication, you achieve a highly scalable architecture.

Benefits of this approach:

• Zero Auth Logic Duplication: The MFE doesn't implement login/refresh flows. It just asks the Host for a token.

• Type Safety: Shared models via the Data Layer package.

• Style Isolation: Tailwind prefixing prevents CSS nightmares.

• Framework Agnostic Data: The Data Layer can be reused in a React Native app or even an Angular MFE.

Ready to break up your monolith? Start small, extract the data layer first, and happy coding! ✨

Why WebSockets?

Imagine you’re building a chat app. You want messages to appear instantly without the user having to refresh the page or wait for updates. WebSockets make this happen by keeping a continuous connection open between your app and the server. This allows data to flow back and forth instantly, giving your users that smooth, real-time experience.

Setting Up WebSockets in Flutter

To get started with WebSockets in Flutter, you first need to import the necessary Dart packages in pubspec.yaml:

dependencies:
  retry: ^3.1.0

Meet the WebSocket Manager

A well-structured approach to handling WebSocket connections in Flutter is to use a singleton class. This class will handle everything related to WebSockets, from connecting to the server to managing incoming data.

import 'dart:async';
import 'dart:developer';
import 'dart:io';

class WebSocketManager {
  // Singleton pattern - only one instance of WebSocketManager will exist
  static final WebSocketManager _singleton = WebSocketManager._internal();

  // StreamController to manage the flow of data
  final StreamController<Object> streamController = StreamController.broadcast(sync: true);

  // Variable to store the WebSocket URL
  late String wsUrl;
  WebSocket? socket;
  WebSocketStatus status = WebSocketStatus.closed;

  // Factory constructor to return the singleton instance
  factory WebSocketManager(String url) {
    _singleton.wsUrl = url;
    return _singleton;
  }

  // Private constructor for the singleton pattern
  WebSocketManager._internal();

  // Initialize the WebSocket connection
  Future<void> initWebSocketConnection() async {
    // Check if the WebSocket is closed before connecting
    if (status == WebSocketStatus.closed) {
      status = WebSocketStatus.connecting;
      log("Socket Connecting...");
      socket = await connectWs();

      // If the connection is successful, open the WebSocket and start listening for data
      if (socket?.readyState == WebSocket.open) {
        socket!.pingInterval = const Duration(seconds: 5);
        status = WebSocketStatus.open;
        log("Connection OPEN");
        broadcast();
      } else {
        // If the connection fails, log the error and close the WebSocket
        log("Connection DONE inside initWebSocketConnection()");
        log("Close Code: ${socket?.closeCode}");
        status = WebSocketStatus.closed;
        streamController.addError('Connection Done with close code: ${socket?.closeCode}');
      }
    }
  }

  // Broadcast data received from the WebSocket to all listeners
  void broadcast() {
    socket?.listen(
      (dynamic streamData) {
        try {
          streamController.add(streamData as String);
        } catch (e) {
          streamController.addError(e.toString());
        }
      },
      onDone: () {
        status = WebSocketStatus.closed;
        log("Connection DONE");
        streamController.addError('Connection Done with close code: ${socket?.closeCode}');
      },
      onError: (dynamic e) async {
        status = WebSocketStatus.closed;
        streamController.addError(e.toString());
      },
    );
  }

  // Connect to the WebSocket server with retry logic
  Future<WebSocket?> connectWs() async {
    // Retry connection with exponential backoff
    const r = RetryOptions(maxAttempts: 20, delayFactor: Duration(seconds: 1));
    WebSocket? response;

    try {
      // Attempt to connect to the WebSocket server
      response = await r.retry(
        () => WebSocket.connect(wsUrl),
        retryIf: (e) {
          // You can provide any condition for retrying
          return true;
        },
        onRetry: (e) {
          log("Socket Connection Error: $e");
          log("Retrying!");
        },
      );
    } on TimeoutException {
      // If the connection times out, try again
      log("Socket TimeoutException!");
      initWebSocketConnection();
      return null;
    } catch (e) {
      // If there's another type of error, log it or handle it accordingly
      log("Socket connection error: $e");
      return null;
    }

    return response;
  }

  // Function for dispose of the WebSocket connection
  Future<void> dispose() async {
    await socket?.close();
    socket = null;
    status = WebSocketStatus.closed;
  }
}

Key Components of the WebSocketManager Class

• Singleton Pattern: The class uses a singleton pattern to ensure only one instance of WebSocketManager exists, managing the WebSocket connection across the entire app.

• StreamController: This is used to broadcast incoming messages from the WebSocket to multiple listeners within the app.

• WebSocket Status: The WebSocketStatus enum tracks the state of the WebSocket connection (open, closed, or connecting).

• Retry Logic: Exponential backoff with jitter is implemented using the retry package, allowing the WebSocket to automatically retry the connection multiple times if it fails.

Adding WebSocketManager to Your Flutter App

Once you’ve set up the WebSocketManager class, the next step is to integrate it into your Flutter application. Below is an example of how to use the WebSocketManager in your app:

// Initialize the WebSocketManager with the appropriate WebSocket URL
wsManager = WebSocketManager("https://echo.websocket.org/");

// Establish the WebSocket connection
wsManager?.initWebSocketConnection();

// Retrieve the StreamController from the WebSocketManager
final streamController = wsManager?.streamController;

// ...

// Listen to the WebSocket stream and handle incoming data
StreamBuilder<dynamic>(
  stream: streamController?.stream, // The stream of data from the WebSocket
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if (snapshot.hasError) {
      // Show an error message in the UI
      return Text('Error: ${snapshot.error}');
    }

    if (snapshot.connectionState == ConnectionState.waiting) {
      // Show a loading indicator while waiting for the stream to emit data
      return const CircularProgressIndicator();
    }

    if (snapshot.hasData) {
      // Display the received data in the UI
      return Text('Received data: ${snapshot.data}'); 
    }

    // Show a default message if no data is received
    return const Text('No data available');
  },
)

What’s Going On Here?

• WebSocket Initialization: We start by creating our WebSocketManager with a URL. This URL tells the WebSocket where to connect.

• Connection Setup: Next, we call initWebSocketConnection() to start the connection. This gets our WebSocket up and running.

• StreamController: Remember that radio broadcaster? We’re tuning into it here. We grab the StreamController from our WebSocketManager to listen to any messages coming through.

• StreamBuilder: This function builds the UI every time a new snapshot of data arrives on the stream. It also runs when the stream’s connection state changes.

This approach ensures that your UI stays responsive and up-to-date with real-time data from the WebSocket.

Conclusion

WebSockets in Flutter might sound a bit intimidating at first, but with a solid understanding of how to manage connections and data, you’ll be up and running in no time. Remember, the key is to keep it simple, handle errors gracefully, and enjoy the process of bringing real-time communication to life in your app!

Happy coding! 🎉

Hey there, fellow Flutter enthusiast! Are you ready to level up your app's notification game? Buckle up because we're about to dive into the world of Firebase Cloud Messaging (FCM) and Flutter. In this guide, we'll explore how to set up FCM for your Flutter app, utilizing the power of Firebase and the magic of Dart. By the end of this journey, you'll be a notification ninja, delivering timely and engaging messages to your users like a pro.

Getting Started with Firebase Cloud Messaging

What is Firebase Cloud Messaging?

Firebase Cloud Messaging, or FCM for short, is a cross-platform messaging solution that allows you to send notifications and data messages to your users on Android, iOS, and the web. It's a powerful tool that enables you to engage with your audience in real time, keeping them informed and connected to your app.

Setting up Firebase for your Flutter App

First things first, let's set up Firebase for our Flutter app. Follow these steps:

1. Create a new Flutter project or open an existing one.

2. Head over to the Firebase Console (console.firebase.google.com) and create a new project.

3. Follow the on-screen instructions to add your Flutter app to the Firebase project.

4. Download the google-services.json file for Android or GoogleService-Info.plist file for iOS and place it in the respective directories of your Flutter app.

You can read more about the FCM setup here: https://firebase.google.com/docs/cloud-messaging/flutter/client

Dependency Setup

To use Firebase Cloud Messaging in your Flutter app, you need to add the firebase_messaging package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  firebase_messaging: ^14.7.2
  flutter_local_notifications: ^16.1.0

Run flutter pub get to install the packages.

Note: Before using Firebase Cloud Messaging, you must first have ensured you have initialized FlutterFire.

Initializing Firebase Messaging

Before we move on to implementing Firebase Messaging in our app, we must look at understand different message types:

Message types

A message payload can be viewed as one of three types:

1. Notification-only message: The payload contains a notification property, which will be used to present a visible notification to the user.

2. Data-only message: Also known as a "silent message", this payload contains custom key/value pairs within the data property which can be used how you see fit. These messages are considered "low priority".

3. Notification & Data messages: Payloads with both notification and data properties.

Based on your application's current state, incoming payloads require different implementations to handle them:

We'll dive into the implementation part soon!

Note: Data-only messages are considered low priority by devices when your application is in the background or terminated, and will be ignored. You can however explicitly increase the priority by sending additional properties on the FCM payload:

• On Android, set the priority field to high.

• On Apple (iOS & macOS), set the content-available field to true.

Let's initialize Firebase Messaging in our app. We'll create a NotificationService class to handle all things related to notifications in a file named notification_service.dart.

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class NotificationService {
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
final FlutterLocalNotificationsPlugin _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
String fcmToken = '';

  NotificationService() {
    // Initialize Firebase Messaging
    _initializeFCM();
    // Initialize Flutter Local Notifications
    _initializeFlutterLocalNotifications();
  }

  void _initializeFCM() async {
    _firebaseMessaging.setAutoInitEnabled(true);

    // Request permission
    _firebaseMessaging.requestPermission(sound: true, badge: true, alert: true);
    fcmToken = await _firebaseMessaging.getToken() ?? '';
    debugPrint('FCM Token: $fcmToken');

    // Handle background messages
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

    // Handle messages when the app is in the foreground
    FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
      if (message.notification != null) {
        showLocalNotification(message);
      }
    });
  }

  void _initializeFlutterLocalNotifications() {
    // Initialize Flutter Local Notifications
    // We'll add code here later...
  }

  void showLocalNotification(RemoteMessage message) {
    // Show local notification
    // We'll add code here later...
  }
}

NotificationService notificationService = NotificationService();

Handling messages whilst your application is in the background is a little different. Messages can be handled via the onBackgroundMessage handler. When received, an isolate is spawned (Android only, iOS/macOS does not require a separate isolate) allowing you to handle messages even when your application is not running.

There are a few things to keep in mind about your background message handler:

• It must not be an anonymous function.

• It must be a top-level function (e.g. not a class method which requires initialization).

Hence, add the following code at the top of notification_service.dart, outside the NotificationService class

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  debugPrint(message.toMap().toString());
  notificationService.showLocalNotification(message);
}

Handling Notification On-Tap Action

We also need to handle on-tap action on our notification banners when the app is in the foreground, background and when it's launched from a terminated state. So, in the same class NotificationService add the following:

class NotificationService {
  // ...

  void handlePendingNotifications() {
    // Handle initial notification when the app is started from a terminated state
    _firebaseMessaging.getInitialMessage().then((message) {
      if (message != null) {
        _handleNotificationTap(message);
      }
    });
  }

  void _handleNotificationTap(RemoteMessage message) {
    // Add your notification tap handling logic
  }
}

To handle the notification tap when the app is starting up from a terminated state, you must call the handlePendingNotifications() method once when your app starts up. You can do so in initState() your HomeScreen Widget which gets initialized at the beginning of the app.

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    // Handle the initial notification when the app is started from a terminated state
    notificationService.handlePendingNotifications();

    super.initState();
  }

  // ...
}

Configuring Local Notifications

Notification messages which arrive whilst the application is in the foreground will not display a visible notification by default, on both Android & iOS. It is, however, possible to override this behavior:

On Android, notification messages are sent to Notification Channels which are used to control how a notification is delivered. The default FCM channel used is hidden from users, however provides a "default" importance level. Heads up notifications (shown when our app is in the foreground) require a "max" importance level.

This means that we need to first create a new channel with a maximum importance level & then assign incoming FCM notifications to this channel. Although this is outside of the scope of FlutterFire, we can take advantage of the flutter_local_notifications package to help us.

Initialization

Let's initialize FlutterLocalNotificationsPlugin in our NotificationService.

void _initializeFlutterLocalNotifications() {
  var initializationSettingsAndroid = const AndroidInitializationSettings('@drawable/ic_launcher');
  var initializationSettingsIOS = DarwinInitializationSettings(
    onDidReceiveLocalNotification: (id, title, body, payload) async {},
  );
  var initializationSettings = InitializationSettings(
    android: initializationSettingsAndroid,
    iOS: initializationSettingsIOS,
  );
  _flutterLocalNotificationsPlugin.initialize(
    initializationSettings,
    onDidReceiveNotificationResponse: (details) {
      final message = RemoteMessage.fromMap({'data': jsonDecode(details.payload ?? '{}')});
      _handleNotificationTap(message);
    },
  );

  _flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()
      ?.requestNotificationsPermission();

  _flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<IOSFlutterLocalNotificationsPlugin>()
      ?.requestPermissions(
        alert: true,
        badge: true,
        sound: true,
      );
}

Showing Local Notifications

Finally, let's define a method to show local notifications inside the NotificationService class.

void showLocalNotification(RemoteMessage message) {
  var androidPlatformChannelSpecifics = const AndroidNotificationDetails(
    'channel_id',
    'Channel Name',
    channelDescription: 'Channel Description',
    importance: Importance.max,
    priority: Priority.max,
  );
  var iOSPlatformChannelSpecifics = const DarwinNotificationDetails();
  var platformChannelSpecifics = NotificationDetails(
    android: androidPlatformChannelSpecifics,
    iOS: iOSPlatformChannelSpecifics,
  );

  // Define the ID of the notification
  final id = DateTime.now().millisecondsSinceEpoch ~/ 1000;

  _flutterLocalNotificationsPlugin.show(
    id,
    message.notification?.title ?? '',
    message.notification?.body ?? '',
    platformChannelSpecifics,
    payload: jsonEncode(message.data),
  );
}

Final Showdown

Here's the complete code example of our Notification Service:

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

// Top level background notification handler
@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  debugPrint(message.toMap().toString());
  notificationService.showLocalNotification(message);
}

class NotificationService {
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
final FlutterLocalNotificationsPlugin _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
String fcmToken = '';

  NotificationService() {
    // Initialize Firebase Messaging
    _initializeFCM();
    // Initialize Flutter Local Notifications
    _initializeFlutterLocalNotifications();
  }

  void _initializeFCM() async {
    _firebaseMessaging.setAutoInitEnabled(true);

    // Request permission
    _firebaseMessaging.requestPermission(sound: true, badge: true, alert: true);
    fcmToken = await _firebaseMessaging.getToken() ?? '';
    debugPrint('FCM Token: $fcmToken');

    // Handle background messages
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

    // Handle messages when the app is in the foreground
    FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
      if (message.notification != null) {
        showLocalNotification(message);
      }
    });
  }

  void handlePendingNotifications() {
    // Handle initial notification when the app is started from a terminated state
    _firebaseMessaging.getInitialMessage().then((message) {
      if (message != null) {
        _handleNotificationTap(message);
      }
    });
  }

  void _handleNotificationTap(RemoteMessage message) {
    // Add your notification tap handling logic
  }

  void _initializeFlutterLocalNotifications() {
    var initializationSettingsAndroid = const AndroidInitializationSettings('@drawable/ic_launcher');
    var initializationSettingsIOS = DarwinInitializationSettings(
      onDidReceiveLocalNotification: (id, title, body, payload) async {},
    );
    var initializationSettings = InitializationSettings(
      android: initializationSettingsAndroid,
      iOS: initializationSettingsIOS,
    );
    _flutterLocalNotificationsPlugin.initialize(
      initializationSettings,
      onDidReceiveNotificationResponse: (details) {
        final message = RemoteMessage.fromMap({'data': jsonDecode(details.payload ?? '{}')});
        _handleNotificationTap(message);
      },
    );

    _flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()
        ?.requestNotificationsPermission();

    _flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<IOSFlutterLocalNotificationsPlugin>()
        ?.requestPermissions(
          alert: true,
          badge: true,
          sound: true,
        );
    }

  void showLocalNotification(RemoteMessage message) {
    var androidPlatformChannelSpecifics = const AndroidNotificationDetails(
      'channel_id',
      'Channel Name',
      channelDescription: 'Channel Description',
      importance: Importance.max,
      priority: Priority.max,
    );
    var iOSPlatformChannelSpecifics = const DarwinNotificationDetails();
    var platformChannelSpecifics = NotificationDetails(
      android: androidPlatformChannelSpecifics,
      iOS: iOSPlatformChannelSpecifics,
    );

    // Define the ID of the notification
    final id = DateTime.now().millisecondsSinceEpoch ~/ 1000;

    _flutterLocalNotificationsPlugin.show(
      id,
      message.notification?.title ?? '',
      message.notification?.body ?? '',
      platformChannelSpecifics,
      payload: jsonEncode(message.data),
    );
  }
}

NotificationService notificationService = NotificationService();

Wrapping Up and Next Steps

Congratulations! You've successfully set up Firebase Cloud Messaging for your Flutter app. Now, you can send notifications to your users and keep them engaged with your app's content. But remember, this is just the beginning. There's so much more you can do with FCM, like sending data messages, handling user interactions, and targeting specific user segments.

Happy Coding! 🚀

References

• https://firebase.google.com/docs/cloud-messaging/flutter/client

• https://firebase.google.com/docs/cloud-messaging/flutter/receive

• https://firebase.flutter.dev/docs/messaging/notifications/#foreground-notifications

What is Clean Architecture?

Before we delve into the nitty-gritty of Flutter clean architecture with GetX, let's start with a quick introduction to clean architecture.

Pros of Clean Architecture:

• Modularity: Clean architecture promotes a modular approach, making your codebase easier to understand and maintain.

• Testability: It encourages writing unit tests and makes your codebase more test-friendly.

• Scalability: Your app can grow and evolve without major architectural changes.

• Independence: The architecture keeps external frameworks and libraries at bay, preventing them from tightly coupling with your code.

Cons of Clean Architecture:

• Initial Complexity: Setting up a clean architecture project might seem more daunting compared to a simple structure.

• Learning Curve: Developers new to clean architecture may take some time to fully grasp its concepts.

Now that we're clear on the basics, let's roll up our sleeves and get started!

Project Setup

This project is written using the current latest stable versions of:

• Flutter: v3.10.6

• Dart: v3.0.6

Packages

Before we start coding, let's gather our tools and libraries. Here are the essential packages we'll use:

• getX: The Swiss Army knife for state management. (You can use any kind of state management you prefer to work with such as providerorflutter_bloc)

• freezed: A code generation package for creating immutable data models.

• retrofit & dio: For handling HTTP requests.

• get_it & injectable: For dependency injection.

• go_router: A declarative routing package that provides a convenient, URL-based API for navigating between different screens.

• pretty_dio_logger: A delightful logger for HTTP requests.

Let's include these packages in our pubspec.yaml:

dependencies:
  get: ^4.6.6
  retrofit: ^4.0.2
  dio: ^5.3.3
  get_it: ^7.6.4
  injectable: ^2.3.0
  go_router: ^11.1.2
  pretty_dio_logger: ^1.3.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  build_runner: ^2.4.6
  freezed: ^2.4.3
  json_serializable: ^6.7.1
  retrofit_generator: ^7.0.8
  injectable_generator: ^2.4.0

Folder Structure

Organization is key in clean architecture. Here's a recommended folder structure:

lib/
  ├── config/
  │     ├── injection/
  │     ├── router/
  │     └── themes/
  ├── data/
  │     ├── datasources/
  │     │    ├── local/
  │     │    └── remote/
  │     └── repositories/
  ├── domain/
  │     ├── models/
  │     └── repositories/
  ├── presentation/
  │     ├── controllers/
  │     ├── pages/
  │     └── widgets/
  ├── utils/
  │     ├── constants/
  │     ├── extensions/
  │     └── resources/
  └── main.dart

The config folder includes the configuration of the app (themes, router, ..etc) and anything else related to the app’s configurations.

The utils folder, on the other hand, includes (constants, extensions, resources, ..etc) and anything related to that.

The (data, domain and presentation) folders will be explained later in detail.

Architecture and Dependency Rules

The clean architecture consists of three primary layers:

1. Data Layer: Responsible for data fetching and caching.

2. Domain Layer: Houses the core business logic.

3. Presentation Layer: Manages the user interface and user interactions.

Each layer has its unique responsibilities, and dependencies flow inward. The Data Layer is independent, the Domain Layer depends on Data, and the Presentation Layer relies on both Data and Domain.

App Configuration

Before diving into the layers, let's configure our app. Here's a sneak peek:

Routing

Routing is a fundamental aspect of any Flutter app. We'll use the go_router package to handle navigation efficiently.

You can absolutely choose whatever the routing package you prefer, and that suits your needs.

Now, after adding the package to your pubspec.yaml file as we talked about it at the beginning of the article, create a folder in this path lib/config and call it router, then inside the folder create a file and name it app_router.dart as shown below:

@singleton
class AppRouter {
  final GoRouter _router = GoRouter(
    debugLogDiagnostics: true,
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomeScreen(),
      ),
      GoRoute(
        path: '/profile',
        builder: (context, state) => const UserDetailsScreen(),
      ),
      ...
      // Add more routes as needed
  );

  GoRouter get router => _router;
}

Theme

Defining a global theme ensures consistency in your app's appearance. Let's create a file app_theme.dart inside lib/config/themes:

import 'package:dtdcopedia/config/themes/app_colors.dart';
import 'package:flutter/material.dart';

abstract class AppTheme {
  static ThemeData get light {
    return ThemeData(
      appBarTheme: const AppBarTheme(
        elevation: 0,
        color: AppColors.primary,
      ),
      scaffoldBackgroundColor: AppColors.background,
      primaryColor: AppColors.primary,
      splashColor: Colors.transparent,
      fontFamily: 'Hind',
    );
  }

  static ThemeData get dark {
    return ThemeData(
      appBarTheme: const AppBarTheme(
        elevation: 0,
        color: AppColors.primary,
      ),
      scaffoldBackgroundColor: AppColors.text,
      primaryColor: AppColors.primary,
      splashColor: Colors.transparent,
      fontFamily: 'Hind',
    );
  }
}

This sets up your app's global theme with the specified colors, fonts, and more. You can customize it the way you like.

Utils

In the utils folder, you can organize your utility functions, constants, extensions, and resources neatly. Here's an example structure:

lib/
  ├── utils/
  │     ├── constants/
  │     │     └── app_constants.dart
  │     ├── extensions/
  │     │     ├── string_extensions.dart
  │     │     └── date_extensions.dart
  │     ├── resources/
  │     │     └── data_state.dart
  │     └── ...
  └── ...

For example, in app_constants.dart:

class AppConstants {
  static const String appTitle = 'Flutter Clean Architecture';

 // Networking and APIs
  static const String baseUrl = 'https://appi.example.com/'; 
  static const String defaultApiKey = 'YOUR_API_KEY';

 // Storage and Databases
 static const String appTableName = 'app_table';
 static const String databaseName = 'app_database.db';
}

And in string_extensions.dart:

extension StringExtensions on String {
  String capitalize() {
    return "${this[0].toUpperCase()}${this.substring(1)}";
  }
}

In the lib/utils/resources create a file and name it data_state.dart which contains the following code:

import 'package:dio/dio.dart';

abstract class DataState<T> {
    final T data;
    final DioError error;
    const DataState({this.data, this.error});
}

class DataSuccess<T> extends DataState<T> { 
    const DataSuccess(T data): super(data: data);
}

class DataFailed<T> extends DataState<T> { 
    const DataFailed (DioError error): super(error: error);
}

This wrapper class DataState can be used to wrap our entire network call in order to determine the state of the request being sent to the server and its response.

As you can see in the code, we’ve two different states, one when we get a successful response (DataSuccess), and the other when an error occurs while sending the request or receiving the response (DataFailed).

This is very important as later on when we will have too many requests and logic, you will see how minimized the code will become.

Dependency Injection

Dependency injection is a crucial part of clean architecture. We use get_it and injectable to manage our dependencies efficiently. Here's a glimpse of how it works:

First, inside lib/config/injection, create a file named injection.dart:

import 'package:get_it/get_it.dart';
import 'package:injectable/injectable.dart';
import 'injection.config.dart';

final locator = GetIt.instance;

@InjectableInit()
Future<void> configureDependencies() {
  return locator.init();
}

Now, create a file named register_module.dart inside the same folder. Here we can inject third party packages such as SharedPreferences & Dio:

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:injectable/injectable.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';
import 'package:shared_preferences/shared_preferences.dart';

@module
abstract class RegisterModule {
  // Inject SharedPreferences
  @preResolve
  Future<SharedPreferences> get prefs => SharedPreferences.getInstance();

  // Inject Dio
  @lazySingleton
  Dio dio(SharedPreferences sharedPreferences) {
    final token = sharedPreferences.getString('token') ?? '';

    return Dio(
      BaseOptions(
        baseUrl: AppConstants.baseUrl,
        headers: {
          if (token.isNotEmpty) HttpHeaders.authorizationHeader: "Bearer $token",
        },
      ),
    )..interceptors.add(
        PrettyDioLogger(
          requestHeader: true,
          requestBody: true,
          responseHeader: true,
          maxWidth: 120,
        ),
      );
  }
}

Now you can import and use these utility functions, constants & injected modules throughout your project for a clean and organized codebase. Finally, the main.dart file will look like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await configureDependencies();
  runApp(const MyApp());
}

final _router = locator<AppRouter>().router;

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      title: AppConstants.appTitle,
      theme: AppTheme.light,
      darkTheme: AppTheme.dark,
      routerConfig: _router,
    );
  }
}

Domain Layer

Now, let's dive into the Domain Layer. The Domain Layer is the core of the application's business logic. It encapsulates the rules, behaviours, and core functionality that define how the application operates. This layer is entirely independent of external factors such as databases, network calls, or the user interface.

In Clean Architecture, the Domain Layer should be independent of any specific implementation or framework. This means that the code in the Domain Layer should be written in a technology-agnostic way, with no dependencies on external systems or libraries.

Entities (Models)

Entities/Models are plain Dart classes that represent the core business objects of the application. They model the data that the app operates on and typically contain minimal logic. Entities are defined solely based on the business requirements, and they do not contain any database-specific or UI-related code.

Freezed helps us create immutable data models effortlessly. Here's a sample domain model user.dart inside lib/domain/models:

part 'user.freezed.dart';

@freezed
class User with _$User {
  const factory User({
    required int id,
    required String name,
    // Add more fields as needed
  }) = _User;
}

Repositories (Abstract Definitions)

In the Domain Layer, repositories are defined as abstract classes or interfaces. These abstract definitions declare the methods for interacting with data without specifying how data is fetched or stored. The concrete implementations of these repositories are located in the Data Layer.

Repositories are interfaces that define data sources for our domain layer. For example, user_repository.dart inside lib/domain/repositories:

abstract class UserRepository {
  Future<UserEntity> getUserById(int id);
}

Data Layer

The Data Layer is the foundational layer responsible for handling data operations in a Flutter app. Its primary purpose is to abstract and encapsulate data sources, ensuring that the rest of the application doesn't need to know the specifics of data retrieval and storage.

Data Sources

Data Sources are responsible for interacting with external data providers, such as APIs, databases, or local storage. They define the interfaces for fetching and storing data. This layer is typically implemented using packages like Retrofit, Dio, or other HTTP client libraries for API interactions, as well as database libraries like SQFLite for local storage.

Here's a sample data source service user_data_source.dart inside lib/data/datasources/remote:

@RestApi(baseUrl: 'https://api.example.com/')
abstract class UserDataSource {
  factory UserDataSource(Dio dio) = _UserDataSource;

  @GET('/users/{id}')
  Future<UserEntity> getUserById(@Path() int id);
}

Now, create data_source_injection.dart file inside lib/config/injection and inject the UserDataSource class as a module:

import 'package:dio/dio.dart';
import 'package:your_package_name/data/datasources/remote/user_data_source.dart';
import 'package:injectable/injectable.dart';

@module
abstract class DataSourceInjectableModule {
  UserDataSource getUserDataSource(Dio dio) => UserDataSource(dio);
  // Add more data dources as needed
}

Repositories (Implementation)

Repositories act as intermediaries between Data Sources and the Domain Layer. They provide a clean and consistent API for accessing data. Repositories are defined as abstract classes in the Domain Layer, listing methods like getUserById() or fetchPosts(). The concrete implementations of these repositories, found in the Data Layer, interact with Data Sources to fetch and manipulate data. Repositories also manage data caching and storage.

Before we implement the UserRepository class, we need to create a base class called BaseApiRepository, create a folder inside the data folder and name it base, then create a file inside it and name it base_api_repository.dart which contains the following:

import 'dart:io' show HttpStatus;
import 'package:retrofit/dio.dart';

import 'package:dio/dio.dart';
import 'package:your_project_name/utils/resources/data_state.dart';
import 'package:flutter/material.dart';

abstract class BaseApiRepository {
  @protected
  Future<DataState<T?>> getStateOf<T>({
    required Future<HttpResponse<T>> Function() request,
  }) async {
    try {
      final httpResponse = await request();
      if (httpResponse.response.statusCode == HttpStatus.created || httpResponse.response.statusCode == HttpStatus.ok) {
        return DataSuccess(httpResponse.data);
      } else if (httpResponse.response.statusCode == HttpStatus.unauthorized) {
        throw DataFailed(DioException(
          response: httpResponse.response,
          requestOptions: httpResponse.response.requestOptions,
        ));
      } else {
        throw DioException(
          response: httpResponse.response,
          requestOptions: httpResponse.response.requestOptions,
        );
      }
    } on DioException catch (error) {
      return DataFailed(error);
    }
  }
}

This base class plays an important role here, which wraps our API call that comes from the data source user_data_source.dart and return a DataState object instead of HttpResponse.

By doing so, we’re reducing the boilerplate code in each method without the need to write “try-catch” or “if” statements everywhere because you only need to pass the request in the “getStateOf” method and this should do the rest and return the result based on the generic “T” type.

Now create user_repository_impl.dart inside lib/data/repositories & implement the previously defined UserRepository class as below:

@Injectable(as: UserRepository)
class UserRepositoryImpl extends BaseApiRepository implements UserRepository {
  final UserDataSource _userDataSource;
  UserRepositoryImpl(this._userDataSource);

  @override
  Future<DataState<User?>> getUserById(int id) {
    return getStateOf<User>(
      request: () => _userDataSource.getUserById(id),
    );
  }
}

Presentation Layer

Last but not least, we arrive at the Presentation Layer, where we build the user interface, controllers, screens, and common widgets.

The benefit of using Presentation Layer is that it makes the codebase more modular and maintainable. By separating the user interface from the business logic and infrastructure, it becomes easier to modify and extend the application over time. Also, it allows for different user interfaces to be developed and used with the same underlying business logic. For example, a web application, a mobile application, and a desktop application could all use the same Domain Layer but have different Presentation Layers that are optimized for their respective platforms.

Controllers

Controllers manage the state and business logic of our app. Here's a snippet of a controller user_controller.dart inside lib/presentation/controllers using GetX:

class UserController extends GetxController {
  static UserController get call => Get.find();

  final UserRepository _userRepository = locator<UserRepository>();
  final Rx<User> user = Rx<User>(User(id: 0, name: ''));

  Future<void> fetchUser(int id) async {
    final result = await _userRepository.getUserById(id);
    user.value = result;
  }
}

Screens

Screens are where the magic happens. Screens correspond to the different views or pages of the app. Each screen is typically represented by a Flutter widget. Screens are responsible for rendering the UI and displaying data to the user.

You can create screen files inside lib/presentation/screens folder. For example, here's user_details_screen.dart:

class UserDetailsScreen extends StatefulWidget {
  const UserDetailsScreen({super.key});

  @override
  State<UserDetailsScreen> createState() => _UserDetailsScreenState();
}

class _UserDetailsScreenState extends State<UserDetailsScreen> {
  @override
  void initState() {
    // Initialize & inject UserController() using Get.put()
    Get.put<UserController>(UserController(), permanent: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final controller = UserController.call;
    final userIdController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('User Details'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: userIdController,
              decoration: InputDecoration(labelText: 'Enter User ID'),
              keyboardType: TextInputType.number,
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                final userId = int.tryParse(userIdController.text);
                if (userId != null) {
                  controller.fetchUser(userId);
                } else {
                  // Handle invalid input
                  Get.snackbar('Invalid Input', 'Please enter a valid User ID',
                      snackPosition: SnackPosition.BOTTOM);
                }
              },
              child: Text('Fetch User'),
            ),
            SizedBox(height: 16.0),
            Obx(() {
              if (controller.isLoading.value) {
                return CircularProgressIndicator();
              } else if (controller.user.value.id == 0) {
                return Text('User details will appear here');
              } else {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('User ID: ${controller.user.value.id}'),
                    Text('Name: ${controller.user.value.name}'),
                    // Add more user details as needed
                  ],
                );
              }
            }),
          ],
        ),
      ),
    );
  }
}

Run

1. Install Dependencies: Ensure that you have all the required packages and dependencies installed. Run the following command:

    flutter pub get
   

2. Generate Code: Since our app uses code generation tools like freezed, json_serializable, etc., it's important to generate necessary code files. Run the following command:

    flutter pub run build_runner build --delete-conflicting-outputs
   

   This command generates code that's needed for serialization, deserialization, and more. The --delete-conflicting-outputs flag helps resolve any conflicts that may arise during code generation.

3. Run the App: Finally, you can launch the app using the following command:

    flutter run
   

Conclusion

Congratulations! 🥳 You've just embarked on a thrilling journey of implementing clean architecture in Flutter using GetX. Clean architecture can be a bit challenging at first, but once you get the hang of it, it makes your code more maintainable and scalable.

So, go forth and create amazing Flutter apps with clean architecture. Happy coding! 🚀📱✨

As a Flutter Developer, you must have used packages/libraries and wanted to add some additional functionality to them based on your use cases. But you cannot just add methods to that class as the original class is in someone else's library.

A typical way of extending the functionality would be to create a Utility class providing static methods for your custom use cases:

class StringUtil {
  static bool isValidEmail(String email) {
    return RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(email);
  }
}

// Usage
void main() {
  print(StringUtil.isValidEmail('name@company.com'));  // Output: true
}

This is perfectly fine, but it does not fit well with the Object-Oriented programming paradigms as we are used to performing an operation on the actual instance of an object like:

String email = 'name@company.com';
email.toLowerCase();
email.isEmpty;

We could also create a wrapper class with the original class inside it. But it seems wasteful to wrap an object with another object just because we want to extend the original class with some methods.

So, what can help us here?

Yes, you guessed right, Extensions!

Enable Extension Methods

To enable extension methods, you need to go to your pubspec.yaml file and ensure the SDK version is set to 2.6.0 or greater:

environment:
  sdk: ">=2.6.0 <3.0.0"

Make sure to run flutter pub get after updating the pubspec.yaml.

Implementing Extension Methods

Extensions can define not just methods, but also other members such as getters, setters, and operators. Also, extensions have names, which can be helpful if an API conflict arises.

You define an extension method by using the following syntax:

extension <extension name> on <type> {
  (<member definition>)*
}

For example, here’s how you might implement an extension on the String class:

extension NumParse on String {
  int parseInt() {
    return int.parse(this);
  }

  double parseDouble() {
    return double.parse(this);
  }
}

// Usage
void main() {
  var num1 = '50'.parseInt();
  var num2 = '101.01'.parseDouble();

  print(num1.runtimeType);  // Output: int
  print(num2.runtimeType);  // Output: double
}

• To extend with getters, you can do something like:

extension StringValidation on String {
  bool get isValidEmail {
    return RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(this);
  }
}

// Usage
void main() {
     print('name@company.com'.isValidEmail);  // Output: true
}

• To extend with operators:

extension StringOps on String {
  String operator &(String prefix) => "$prefix $this";
}

// Usage
void main() {
     print('google.com'&'https://');  // Output: https://google.com
}

Implementing Generic Extensions

Extensions can have generic type parameters. For example, here’s some code that extends the built-in List<T> type with a getter, an operator, and a method:

extension ListX<T> on List<T> {
  int get doubleLength => length * 2;
  List<T> operator -() => reversed.toList();
  List<List<T>> split(int at) => [sublist(0, at), sublist(at)];
}

• You can also extend only lists of some type. For example, This Extension will only show up on lists of integers:

extension PowerList<int> on List<int> {
  int get sum => fold(0, (a, b) => a + b);
}

// Usage
void main() {
  print([1, 2, 3].sum());  // Output: 6
}

• You can also create an Extension that operates on any type T that extends num:

extension IterableNumX<T extends num> on Iterable<T> {
  T sum() {
    // 1. initialize sum
    var sum = (T == int ? 0 : 0.0) as T;
    // 2. calculate sum
    for (var current in this) {
      if (current != null) { // only add non-null values
        sum += current;
      }
    }
    return sum;
  }
}

Credit: I borrowed this example from this blog post.

How To Use Extension Methods

Like all Dart code, you usually put extension methods in their independent dart files which can be imported as libraries. To use extension methods in your code, just import the library it’s in, and use it like an ordinary method:

// Import a library that contains an extension on String.
import 'string_ext.dart';
// ···
print('50'.padLeft(5));  // String method
print('50'.parseInt());  // Extension method

Using With Static and Dynamic types

You can’t invoke extension methods on variables of type dynamic. For example, the following code results in a runtime exception:

dynamic num = '50';
print(num.parseInt());  // Throws Runtime exception: NoSuchMethodError

On the other hand, extension methods do work with Dart’s type inference. The following code is fine because the variable num is inferred to have type String:

var num = '50';
print(num.parseInt());  // Output: 50

The reason why dynamic doesn’t work is that extension methods are resolved against the static type of the receiver. Because extension methods are resolved statically, they’re as fast as calling a static function.

Resolving API Conflicts

There are chances that extension methods with the same name are created in different Dart files and you may face API conflicts. For example:

// File: string_validation.dart
extension StringValidation on String {
  bool get isValidEmail {
    return RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(this);
  }
}
--------------------------------------------------------
// File: string_ext.dart
extension StringX on String {
  bool get isValidEmail {
    return RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(this);
  }
}
-------------------------------------------------------
main() {
  print('name@company.com'.isValidName);
}

This will produce a compile-time error and your code will not run.

To resolve this conflict, we have 2 different methods:

• Use show or hide to limit the exposed API:

// Defines the String extension method isValidEmail().
import 'string_validation.dart';

// Also defines isValidEmail(), but hiding StringX
// hides that extension method.
import 'string_ext.dart' hide StringX;

// ···
// Uses the isValidEmail() defined in 'string_validation.dart'.
print('name@company.com'.isValidName);

• Apply the extension explicitly:

// Both libraries define extensions on String that contain isValidEmail(),
// and the extensions have different names.
import 'string_validation.dart';  // Contains StringValidation extension
import 'string_ext.dart';  // Contains StringX extension

// ···
// print('name@company.com'.isEmailValid);  // Doesn't work.
print(StringValidation('name@company.com').isValidEmail);
print(StringX('name@company.com').isValidEmail);

Flutter Advantage

You might be wondering if we can create extension methods on any class, then Flutter Widgets should also support it as they're also classes.

Well, you guessed right.

We can create extensions on existing Flutter Widgets, and reduce boilerplate code for common layout tasks. Suppose you want different alignment of children in the column. Normally you would do something like this:

Column(
  children: <Widget>[
    Align(
      alignment: AlignmentDirectional.centerStart,
      child: SomeWidget(),
    ),
    Align(
      alignment: AlignmentDirectional.centerEnd,
      child: SomeAnotherWidget(),
    ),
  ],
)

This can be made more elegant using extensions like this:

extension AlignUtil on Widget {
  alignAtStart() {
    return Align(
      alignment: AlignmentDirectional.centerStart,
      child: this,
    );
  }

  alignAtEnd() {
    return Align(
      alignment: AlignmentDirectional.centerEnd,
      child: this,
    );
  }
}
------------------------------------------------------------
Column(
  children: <Widget>[
    SomeWidget().alignAtStart(),
    SomeAnotherWidget().alignAtEnd()
  ],
)

Credit: I borrowed this example from this blog post.

More to Explore

Do check out these popular packages that provide useful extensions:

• Dartx is a package which adds a lot of useful extension methods to types in the Dart Language.
  https://pub.dev/packages/dartx
• Styled Widgets is another package that started as an experiment, showing how widget styling APIs could be improved, using a syntax that is similar to the SwiftUI framework by Apple.
  https://pub.dev/packages/styled_widget
• Time is yet another package which adds extensions to the Flutter's DateTime library.
  https://pub.dev/packages/time

Conclusion

Extensions are a great way to add functionality to existing classes & libraries. It can also help in reducing boilerplate code to a great extent. But Just because we can use extensions, it doesn't mean that we should use them everywhere.

Remember: with power comes great responsibilities.

References

That's all folks! Do let me know what you liked and what can be improved in the comments below! Also, feel free to drop me a line if you don't understand something. ✌

Thanks for reading!

Introduction

Null safety helps you solve one of the most common errors in software development: NullPointerException.

The main issue with the NullPointerException is that it can happen in almost any part of the app if not well handled. Checking for nulls every now and then throughout your app isn’t the best solution either. As your app grows, it can become even harder to handle the null values. For these reasons and more, handling nulls at the language level is probably the best way to avoid the infamous NullPointerEception.

To build on this idea, the Dart team introduced sound null safety. This means that variables are considered non-nullable by default. If you don’t give an object null support when you create it, it will never store a null. As a result, you avoid null reference errors in your code.

Activate Null Safety

To activate null safety, you need to go to your pubspec.yaml file and ensure the SDK version is set to:

environment:
  sdk: ">=2.12.0 <3.0.0"

Make sure to run flutter pub get after updating the pubspec.yaml.

The Dart Type System

Before we move on to creating null safe apps, let's discuss the type system implemented by Dart.
Dart divides types into two groups:

• Nullable types - can contain either a value or null
• Non-Nullable types - can only contain values. Nulls are not permitted

Let's have a look at these types in the next section.

Understanding Sound Null Safety

Now that we have null-safety activated, all our types are by default non-nullable, which means they all require some value.

String name = 'Aditya Sharma';   // This works ✔
String name = null;   // Will throw error ❌

Adding a ? makes the Type nullable and allows us to pass a null value to our name field.

String? name = 'Aditya Sharma';   // This works ✔
String? name = null;   // This works too ✔

Let's now have a look at some real-world scenarios:

1. Null Checks

Null check is a Dart feature that helps you to avoid null related errors.

Let's take an example:

void setName(String name) {  
  name.toUpperCase();
  print(name);
}

void main() {
  setName(null);   // Throws error ❌
}

In this case, type String is not nullable and thus we cannot store a null inside it.

If we want to pass a null value to setName(), we change the parameter type to String?:

void setName(String? name) {
  name.toUpperCase();   // Warning here ❌
  print(name);
}

void main() {
  setName(null);
}

Now, the compiler warns us that we cannot call the upperCase() on name as it can also store a null value.
We have 2 ways to fix it:

1. The null aware accessor ?.:

   void setName(String? name) {
     name?.toUpperCase();
     print(name);
   }
   //
   void main() {
     setName(null);
   }
   

2. Check for null before calling any method on name:

   void setName(String? name) {
     if (name == null) return;
     name.toUpperCase();
     print(name);
   }
   //
   void main() {
     setName(null);
   }
   

2. Non-nullable Type to Nullable Type Conversion

When converting from Type to Type?, there is no problem as Type? accepts both real value and null value.

void main() {
  String name = 'Aditya';
  String? newName = name;   // Works fine ✔
}

3. Nullable Type to Non-nullable Type Conversion

When converting from Type? to Type, the compiler gives us a warning.

void main() {
  String? name = null;
  String newName = name;   // Warning ❌
}

We have 3 ways to fix it:

1. Check for null before conversion:

   void main() {
     String? name = null;
   
     if (name != null) {
       String newName = name;  
     }
   }
   

2. Using the if-null ?? operator for providing a default value:

   void main() {
     String? name = null;
     String newName = name ?? 'Aditya';  
   }
   

3. Using the Bang operator ! (also called the null assertion operator):

   void main() {
     String? name = null;
     String newName = name!;  
   }
   

   PS: If you’re sure that an expression with a nullable type isn’t null, you can use a null assertion operator ! to make Dart treat it as non-nullable. By adding ! just after the expression, you tell Dart that the value won’t be null, and that it’s safe to assign it to a non-nullable variable.
   ⚠️: If you’re wrong, Dart throws an exception at run-time. This makes the ! operator unsafe, so don’t use it unless you’re very sure that the expression isn’t null.

4. Late Init

Sometimes, you can’t initialize properties in the constructor, but you’ll define them in other methods of your class. In that case, you mark those properties with late.

Another advantage of late is lazy initialization. Dart will not initialize late properties until they’re used for the first time. This can be useful during app initialization when an expression is costly or might not be needed.

late String name;

@Override
void initState() {
  super.initState();

  name = 'Aditya Sharma';
}

Sound Null Safety In a Nutshell

Dart has three main operators to work with null:

• Null-aware operators: The null aware accessor ?., which accesses properties of its operand, is an example. If the operand is null, then it will not throw an exception. Instead, it shows null text.
• Bang operator: Use ! to cast away nullability. It tries to cast a nullable type to a non-nullable type, throwing an exception if the operand is null.
• If-null operator: ?? is shorthand for an if-else condition. If the left side of the ?? operator is null, then it will use its right side.
• Late init: Use late on variables when you’re sure you’ll initialize them before using them. Use late with class properties.

References

• https://www.raywenderlich.com/21955673-non-nullable-dart-understanding-null-safety#toc-anchor-018
• https://www.youtube.com/watch?v=PnSpQkOKwv0&t=52s

That's all folks! Do let me know what you liked and what can be improved in the comments below! Also, feel free to drop me a line if you don't understand something. ✌

Thanks for reading!

Contents

• let & const
• ES6 Arrow Functions
• Exports & Imports
• Classes
• Spread & Rest Operator
• Destructuring

let & const

let and const basically replace var. let is very similar to var with the difference that the let variable has a block-level scope (i.e. the enclosing { } just like variables in other languages). On the other hand, the scope of a var variable is the entire enclosing function.

Let's have a look at an example:

function varDemo() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letDemo() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

Use const instead of var if you plan on never re-assigning this "variable". It's a good practice to assign arrays and objects as a const.

const number = 2;

try {
  number = 99;
} catch (err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
}

console.log(number);
// expected output: 2

Read more about let here.
Read more about const here.

ES6 Arrow Functions

Arrow functions are an alternate way of creating functions in JavaScript. Besides a shorter syntax, they offer advantages when it comes to keeping the scope of the this keyword.

// Traditional Function
function callMe(a) {
  console.log(a);
}

// Arrow Function Break Down

// 1. The above function can be written as:
const callMe = function(a) {
  console.log(a);
}

// 2. Remove the word "function" and place arrow between the argument 
// and opening body bracket
const callMe = (a) => {
  console.log(a);
}

Important:

• When having no arguments, you have to use empty parentheses in the function declaration:

  const callMe = () => { 
    console.log('Something!');
  }
  

• When having exactly one argument, you may omit the parentheses:

  const callMe = name => { 
    console.log(name);
  }
  

• When just returning a value, you can use the following shortcut:

  const returnMe = name => name;
  // That's equal to:
  const returnMe = name => { 
    return name;
  }
  

Read more about ES6 Arrow functions here.

Exports & Imports

In all modern JavaScript projects, you split your code across multiple JavaScript files - so-called modules. You do this to manage your large code base and make it understandable.

To access functionality in another file, you need export (to make it available) and import (to get access) statements.

export

You got two different types of exports: default (unnamed) and named exports:

• default export

  const user = {
  id: 1,
  name: 'SomeName'
  }
  // Export user
  export default user
  

• named export

  // export individual features (can export var, let,
  // const, function, class)
  export const initialize = () => { ... }
  export const BASE_URL = 'https://xyz... '
  // Or export features declared earlier like this:
  export { initialize, BASE_URL };
  

Important

A file can only contain one default and an unlimited amount of named exports. You can also mix the one default with any amount of named exports in one and the same file.

import

• You can import default exports like this:

  import someNameOfYourChoice from './path/to/file.js';
  

  Surprisingly, someNameOfYourChoice is totally up to you.

• Named exports have to be imported by their name:

  import { someData } from './path/to/file.js';
  

  When importing named exports, you can also import all named exports at once with the following syntax:

  import * as upToYou from './path/to/file.js';
  

  upToYou is, well, up to you and simply bundles all exported variables/functions in one JavaScript object.
  For example, if you export const someData = ..., you can access it on upToYou like this: upToYou.someData

Read more about export here.
Read more about import here.

Classes

Classes are a feature that basically replaces constructor functions and prototypes. You can define blueprints for JavaScript objects with them just like other OOP languages.

Like this:

class User {
    constructor () {
        this.name = 'SomeName';
    }
}

const user = new User();
console.log(user.name); // prints 'SomeName'

The syntax you see above is the "old" syntax for defining properties. In modern JavaScript projects, you can use the following, more convenient way of defining class properties:

class User {
    name = 'SomeName';
}

const user = new User();
console.log(user.name); // prints 'SomeName'

You can also define methods. Either like this:

class User {
    name = 'SomeName';
    printName () {
        console.log(this.name); // this is required to refer to the class!
    }
}

const user = new User();
user.printName(); // prints 'SomeName'

Or like this:

class User {
    name = 'SomeName';
    printName = () => {
        console.log(this.name);
    }
}

const user = new User();
user.printName(); // prints SomeName

The second approach has the same advantage as all arrow functions have: The this keyword doesn't change its reference.

You can also use inheritance when using classes:

class Human {
    gender = 'male';
}

class User extends Human {
    name = 'SomeName';
    printName = () => {
        console.log(this.name);
    }
}

const user = new User();
user.printName(); // prints 'SomeName'
console.log(user.gender); // prints 'male'

Read more about class here.

Spread & Rest Operator

The spread and rest operators actually use the same syntax: ... Yes, it's just three dots! Its usage determines whether you're using it as the spread or rest operator.

Spread Operator

The spread operator allows you to pull elements out of an array (split the array into a list of its elements) or pull the properties out of an object.

Here are two examples:

// spread operator used on array
const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5]; // This now is [1, 2, 3, 4, 5];

// spread operator used on an object
const oldObject = {
    name: 'SomeName'
};
const newObject = {
    ...oldObject,
    age: 23
};

// newObject  would then be
{
    name: 'SomeName',
    age: 23
}

Note

The spread operator is extremely useful for cloning arrays and objects. Since both are reference types (and not primitives), copying them safely can be tricky. With the spread operator, you have an easy way of creating a clone of the object or array.

Rest Operator

The rest operator allows a function to accept an indefinite number of arguments as an array.

Here's how you use it:

const filter = (...args) => {
  return args.filter(el => el === 1)
}

console.log(filter(1, 2, 3)) // prints [1]

Read more about spread operator here.
Read more about rest operator here.

Destructuring

Destructuring allows you to easily access the elements of arrays or objects and assign them to variables.

Here's an example for destructuring an array:

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2
console.log(array); // prints [1, 2, 3]

And here for destructuring an object:

const user = {
    name: 'SomeName',
    age: 23
}
const {name} = user;
console.log(name); // prints 'SomeName'
console.log(age); // prints undefined
console.log(user); // prints {name: 'SomeName', age: 23}

Destructuring is very useful when working with function arguments. Consider this example:

const printName = (user) => {
    console.log(user.name);
}
printName({name: 'SomeName', age: 23}); // prints 'SomeName'

The above code forces us to call user.name inside of our function. We can condense this code with destructuring:

const printName = ({name}) => {
    console.log(name);
}
printName({name: 'SomeName', age: 23}); // prints 'SomeName'

We get the same result as above but we save some code. By destructuring, we simply pull out the name property and store it in a variable/argument named name which we can then use in the function body.

Read more about Destructuring here.

That's all folks! Do let me know what you liked and what can be improved in the comments below! Also, feel free to drop me a line if you don't understand something. ✌

Thanks for reading!

> A RenderFlex overflowed…
> RenderBox was not laid out
> Viewport was given unbounded height
> An InputDecorator…cannot have an unbounded width
> Incorrect use of ParentData widget

If yes, then this blog post is for you!

In this blog post, I'll discuss and share some common Flutter layout scenarios and best practices. I'll try to focus more on code snippets and less on widget details. For widget details, I'll share the relevant link for the same.

Contents

• Prerequisites
• Single-child layout widgets
  • Align
  • AspectRatio
  • Center
  • ConstrainedBox
  • Container
  • Expanded
  • FittedBox
  • FractionallySizedBox
  • SizedBox
• Multi-child layout widgets
  • Row and Column
  • Stack
  • LayoutBuilder
• References

Prerequisites

• Basic knowledge of Flutter widgets
• Desire to learn something new

Single-child layout widgets

Align

A widget that aligns its child within itself and optionally sizes itself based on the child's size.

Center(
  child: Container(
    height: 120.0,
    width: 120.0,
    color: Colors.blue[50],
    child: const Align(
      alignment: Alignment.topRight,
      child: FlutterLogo(
        size: 60,
      ),
    ),
  ),
)

If you want to align your widget by a ratio from the parent's centre:

Center(
  child: Container(
    height: 120.0,
    width: 120.0,
    color: Colors.blue[50],
    child: const Align(
      alignment: Alignment(0.2, 0.6),
      child: FlutterLogo(
        size: 60,
      ),
    ),
  ),
)

Read more about Align here.

AspectRatio

A widget that attempts to size the child to a specific aspect ratio.
Note: aspectRatio = width / height

Container(
  color: Colors.blue[100],
  alignment: Alignment.center,
  width: double.infinity,
  height: 100.0,
  child: AspectRatio(
    aspectRatio: 16 / 9,
      child: Container(
        color: Colors.green,
    ),
  ),
)

Best Practices:

1. Never put AspectRatio() inside Expanded() or similar widgets that force their child/children to stretch or take up the whole space given by the parent.
2. If needed, put the AspectRatio() widget inside Align() inside Expanded().
   Example:

Expanded(
  child: Align(
    AspectRatio(
      aspectRatio: 16 / 9,
        child: Container(),
    ),
  ),
)

Read more about AspectRatio here.

Center

A widget that centers its child within itself. By default, the widget will match its child's size.

Center(
  child: FlutterLogo(
    size: 60,
  ),
)

Read more about Center here.

ConstrainedBox

By default, most of the widgets will use as little space as possible.
For Examlpe:

Card(
  color: Colors.blue[200],
  child: Text(
    'Widget without constraints',
  ),
)

ConstrainedBox allows its child widget to use the remaining space as desired.

ConstrainedBox(
  constraints: BoxConstraints.expand(),
  child: Card(
    color: Colors.blue[200],
    child: Text(
      'Widget inside ConstrainedBox',
    ),
  ),
)

Note: The same behavior can be obtained using the SizedBox.expand() widget.

Read more about ConstrainedBox here.

Container

Container is one of the most frequently used Widgets!
Container combines a number of other widgets each with their own layout behavior, thus Container's layout behavior is somewhat complicated.

Before we move forward, it's important to understand the layout behavior of the Container.

Layout Behavior

• If the Container has no child, no height, no width, no constraints, and the parent provides unbounded constraints, then Container tries to size as small as possible.
• If the Container has no child and no alignment, but a height, width, or constraints are provided, then the Container tries to be as small as possible given the combination of those constraints and the parent's constraints.
• If the Container has no child, no height, no width, no constraints, and no alignment, but the parent provides bounded constraints, then Container expands to fit the constraints provided by the parent.
• If the Container has an alignment, and the parent provides unbounded constraints, then the Container tries to size itself to match the child.
• If the Container has an alignment, and the parent provides bounded constraints, then the Container tries to expand to fit the parent and then positions the child within itself as per the alignment.
• Otherwise, if the Container has a child but no height, no width, no constraints, and no alignment, the Container passes the constraints from the parent to the child and sizes itself to match the child.

I know that was quite much! But don't worry, you'll get it soon. Let's have a look at some samples below:

• When you don’t specify the height and the width of the Container, it will match its child’s size.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Container(
      color: Colors.yellow[200],
      child: Text(
        'Widget inside Container',
      ),
    ),
  );
}

• When you don’t specify the height and the width of the Container, but specify the alignment, it will match its parent’s size and align its child according to the specified alignment property.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Container(
      color: Colors.yellow[200],
      alignment: Alignment.center,
      child: Text(
        'Widget inside Container',
      ),
    ),
  );
}

• When you only specify the height of the Container, it will match its child’s width.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Container(
      color: Colors.yellow[200],
      height: 100,
      child: Text(
        'Widget inside Container',
      ),
    ),
  );
}

• When you only specify the width of the Container, it will match its child’s height.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Container(
      color: Colors.yellow[200],
      width: 100,
      child: Text(
        'Widget inside Container',
      ),
    ),
  );
}

• When you only specify the height of the Container but also specify the alignment, it will match its parent’s width and align its child according to the specified alignment property.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Container(
      color: Colors.yellow[200],
      height: 100,
      alignment: Alignment.center,
      child: Text(
        'Widget inside Container',
      ),
    ),
  );
}

• When you only specify the width of the Container but also specify the alignment, it will match its parent’s height and align its child according to the specified alignment property.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Container(
      color: Colors.yellow[200],
      width: 100,
      alignment: Alignment.center,
      child: Text(
        'Widget inside Container',
      ),
    ),
  );
}

Read more about Container here.

Expanded

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. It's great for distributing space between multiple items.

Column /*or Row*/ (
  children: <Widget>[
    Expanded(
      child: Card(
        color: Colors.teal,
        child: Center(child: Text('Flex: 1')),
      ),
      flex: 1,
    ),
    Expanded(
      child: Card(
        color: Colors.green,
        child: Center(child: Text('Flex: 2')),
      ),
      flex: 2,
    ),
    Expanded(
      child: Card(
        color: Colors.lightGreen,
        child: Center(child: Text('Flex: 3')),
      ),
      flex: 3,
    ),
  ],
),

Read more about Expanded here.

FittedBox

Scales and positions its child within itself according to fit. It's mainly used to fit images inside itself just like how you fit wallpapers on your desktop!

Container(
  height: 150,
  width: 300,
  color: Colors.yellow[200],
  child: FittedBox(
    clipBehavior: Clip.antiAlias,
    fit: BoxFit.cover,
    child: Image.network(
      'https://xyz.jpg',
    ),
  ),
),

Read more about FittedBox here.

FractionallySizedBox

A widget that sizes its child to a fraction of the total available space.

Center(
  child: FractionallySizedBox(
    widthFactor: 0.6,
    heightFactor: 0.1,
    child: Card(
      color: Colors.orange,
      child: Text('Some Widget'),
    ),
  ),
),

Best Practices:

1. Use FractionallySizedBox() with no child for fractional sized white space.
2. Wrap FractionallySizedBox() inside Flexible() widget so it plays well with Row/Column.

Read more about FractionallySizedBox here.

SizedBox

It is one of the simplest yet useful Widgets. It enforces a specific size on its child.

Layout Behavior

• If given a child, this widget forces it to have a specific width and/or height.
• These values will be ignored if this widget's parent does not permit them. For example, this happens if the parent is the screen or another SizedBox.
• If either the width or height is null, SizedBox will try to size itself to match the child's size in that dimension.
• If height or width is null or unspecified, it will be treated as zero.
• Use SizedBox.expand() to make the SizedBox match the size of its parent. It is equivalent to setting width and height to double.infinity.

Let's have a look at some samples below:

• SizedBox as fixed-size padding

Column(
  children: <Widget>[
    FlutterLogo(size: 50),
    const SizedBox(height: 100),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

• If you want to match the size of the parent, use SizedBox.expand()

SizedBox.expand(
  child: Card(
    color: Colors.orange[200],
    child: Text('Widget inside SizedBox'),
  ),
),

Best Practices

• When placing SizedBox as a child inside a parent Widget which forces its child to be the same size as itself (e.g. another SizedBox), then wrap the child SizedBox in a widget that does permit it to be any size up to the size of the parent, such as Center or Align.
  Example:

SizedBox(
  height: double.infinity,
  width: double.infinity,
  child: Align(
    child: SizedBox(
      height: 100,
      width: 100,
      child: Card(
        color: Colors.orange[200],
        child: Text('Widget inside SizedBox'),
      ),
    ),
  ),
)

Read more about SizedBox here.

Multi-child layout widgets

Row and Column

Row: Layout a list of child widgets in the horizontal direction.
Column: Layout a list of child widgets in the vertical direction.

To align the child widgets inside Row/Column, we use mainAxisAlignment and crossAxisAlignment. Let's have a look at both of these parameters:

MainAxisAlignment

• MainAxisAlignment.start

Row /*or Column*/ (
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

• MainAxisAlignment.center

Row /*or Column*/ (
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

• MainAxisAlignment.end

Row /*or Column*/ (
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

• MainAxisAlignment.spaceBetween

Row /*or Column*/ (
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

• MainAxisAlignment.spaceEvenly

Row /*or Column*/ (
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

• MainAxisAlignment.spaceAround

Row /*or Column*/ (
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

CrossAxisAlignment

• CrossAxisAlignment.start

Row /*or Column*/ (
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 200),
    FlutterLogo(size: 50),
  ],
),

• CrossAxisAlignment.center

Row /*or Column*/ (
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 200),
    FlutterLogo(size: 50),
  ],
),

• CrossAxisAlignment.end

Row /*or Column*/ (
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 200),
    FlutterLogo(size: 50),
  ],
),

• CrossAxisAlignment.stretch

Row /*or Column*/ (
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 200),
    FlutterLogo(size: 50),
  ],
),

• CrossAxisAlignment.baseline
  Places the children along the cross axis such that their baselines match. Since baselines are always horizontal, this alignment is intended for Row Widget. If the main axis is vertical, then this value is treated like CrossAxisAlignment.start.

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: <Widget>[
    Text(
      'Heading',
      style: Theme.of(context).textTheme.headline2,
    ),
    Text(
      'Body',
      style: Theme.of(context).textTheme.bodyText2,
    ),
  ],
),

Use MainAxisSize to size the Row/Column to either match their parent or fit their children.

MainAxisSize

• MainAxisSize.max

Row /*or Column*/ (
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

• MainAxisSize.min

Row /*or Column*/ (
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
    FlutterLogo(size: 50),
  ],
),

Read more about Row here.
Read more about Column here.

Stack

A widget that positions its children on top of each other.
Let's have a look at some of its interesting properties:

• By default, all the children are aligned to the top-left corner of a Stack.

Stack(
  children: <Widget>[
    Container(
      width: 120,
      height: 120,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
),

• To align all the children, we can use the alignment property.

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      width: 120,
      height: 120,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
),

• But what if you want to position all the elements uniquely? In that case, we can either wrap the individual child widgets with an Align() or Positioned() widget.

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.topLeft,
      child: Icon(
        Icons.menu,
      ),
    ),
    Align(
      alignment: Alignment.topRight,
      child: Icon(
        Icons.delete,
      ),
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: Icon(
        Icons.add_circle,
      ),
    ),
    Positioned(
      bottom: 0,
      left: 0,
      child: Icon(
        Icons.home,
      ),
    ),
  ],
),

• Sometimes, a child moves outside of a Stack's bounds. By default, it will be clipped.

To prevent clipping, use clipBehavior: Clip.none.

Stack(
  alignment: Alignment.center,
  clipBehavior: Clip.none,
  children: <Widget>[
    Container(
      width: 120,
      height: 120,
      color: Colors.black54,
    ),
    Positioned(
      bottom: -30,
      right: -30,
      child: Container(
        width: 80,
        height: 80,
        color: Colors.blue,
      ),
    ),
  ],
),

Read more about Stack here: here.

LayoutBuilder

If you want to layout your widgets based on the parent's size, this is the widget you need. One use-case for LayoutBuilder could be building different layouts for different screen sizes.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('LayoutBuilder')),
    body: LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return _buildWideContainers(constraints.maxWidth);
        } else {
          return _buildNormalContainer();
        }
      },
    ),
  );
}

Widget _buildNormalContainer() {
  return Center(
    child: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.teal,
    ),
  );
}

Widget _buildWideContainers(double width) {
  return Center(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          height: double.infinity,
          width: width / 2,
          color: Colors.teal,
        ),
        Container(
          height: double.infinity,
          width: width / 2,
          color: Colors.green,
        ),
      ],
    ),
  );
}

Read more about LayoutBuilder here: here.

References

• Official Flutter layout widgets page:

  https://flutter.dev/docs/development/ui/widgets/layout#Multi-child%20layout%20widgets

• A great article on constraints in FLutter, a must-read:

  https://flutter.dev/docs/development/ui/layout/constraints

• To understand existing layouts & diagnose layout issues, use Flutter Inspector:

  https://flutter.dev/docs/development/tools/devtools/inspector

That's all for now. This blog is a work in progress. I'll try and add more Widgets and samples in the coming days. Feel free to drop a line if you don't understand something.

Thanks for reading!

That's it for now! Feel free to suggest more resources in the comments below! ✌🏻
And don't forget to credit the authors when using their awesome work in your projects! 🙏🏻💯