Padding

Виджет Padding позволяет задать отступы для вложенного элемента.

Он применяет следующий конструктор:

Padding({Key key, @required EdgeInsetsGeometry padding, Widget child})

Для установки отступов в конструкторе применяется параметр padding, который является обязательным параметром. Он представляет класс EdgeInsetsGeometry. Чтобы задать отступы, мы можем использовать один из конструкторов этого класса:

• EdgeInsets.all(double value): устанавливает одно значение double для всех четырех отступов (слева, сверху, справа и снизу)

• EdgeInsets.fromLTRB(double left, double top, double right, double bottom): устанавливает для каждой из четырех сторон свое значение отступ

• EdgeInsets.fromWindowPadding(WindowPadding padding, double devicePixelRatio): определяет простанство, которое соответствует параметру padding

• EdgeInsets.only({double left: 0.0, double top: 0.0, double right: 0.0, double bottom: 0.0}): устанавливает для каждой из четырех сторон ненулевые значения отступов

• EdgeInsets.symmetric({double vertical: 0.0, double horizontal: 0.0}): vertical устанавливает верхний и нижний отступ, а horizontal - левый и правый.

Сначала рассмотрим пример, где не применяются отступы:

import 'package:flutter/material.dart';

void main() {
  runApp(Align(
      alignment: Alignment.topCenter,
      child: Text(
        'Hello Flutter from metanit.com',
          textDirection: TextDirection.ltr
      )
    )
  );
}

Как видно, приложение занимает весь экран, в том числе верхнюю панель смартфона, где расположены различые индикаторы и текущее время.

Применим отступы, чтобы убрать тест в приложении не налазил на верхнюю панель смартфона:

import 'package:flutter/material.dart';

void main() {
  runApp(Padding(
     padding: EdgeInsets.all(40),
      child: Align(
      alignment: Alignment.topCenter,
      child: Text(
        'Hello Flutter from metanit.com',
          textDirection: TextDirection.ltr
        )
      )
    )
  );
}

В данном случае контейнер Align с текстом помещен в другой контейнер - Padding. Padding устанавливает одно значение для всех четырех отступов - 40 единиц. В итоге текст в приложении будет смещен от верхней статусной панели на 40 единиц вниз:

С использованием других конструкторов EdgeInsets можно установить отступы для разных сторон. Например:

import 'package:flutter/material.dart';

void main() {
  runApp(Padding(
     padding: EdgeInsets.only(top: 40, bottom:10, left:10, right:10),
      child: Align(
      alignment: Alignment.topCenter,
      child: Text(
        'Hello Flutter from metanit.com',
          textDirection: TextDirection.ltr
        )
      )
    )
  );
}