-2.3 C
New York
Wednesday, November 29, 2023

Flutter SafeArea example

In simple words, SafeArea is a widget that automatically adds padding needed to prevent its descendants from being covered by notches, the system status bar, rounded corners… or other similar creative physical features on the device screen.

Constructor:Advertisements

SafeArea({
  Key? key,
  required Widget child 
  bool left, 
  bool top, 
  bool right, 
  bool bottom, 
  EdgeInsets minimum, 
  bool maintainBottomViewPadding, 
})

Example

Without SafeArea

With SafeArea

The complete source code that produces the sample app that shown in the second screenshot:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: const [
            Text(
              'There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain',
              style: TextStyle(fontSize: 16),
            ),
            Text(
                'There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain')
          ],
        ),
      ),
    );
  }
}

Further reading:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Advertisements

Related Articles

Latest Articles