Как я понял Flutter за 1 день и прибил его.

Это долгожданная статья, которую я наконец начал. Эта статья посвящена тому, как я начал работать с Flutter в самый первый день и почти закончил. Эта статья будет посвящена исключительно основам Flutter, которые вам необходимо понять, прежде чем погрузиться в него.

Язык для написания :- Flutter использует dart в качестве языка программирования, с которым довольно легко начать работу, и эта статья посвящена ему. Но сначала поймите, почему Flutter решил использовать Dart?

1*nebfmOdQ2XVS_quqxSV7wQ.png

Почему Дарт?

Dart — аккуратный, короткий и строго типизированный объектно-ориентированный язык. Dart обеспечивает высокую производительность и обеспечивает предсказуемую производительность, и его можно использовать в качестве межплатформенного языка. Компиляция Dart может быть: —

JIT (как раз вовремя): —

Это обеспечивает исключительно быстрые циклы разработки и революционный рабочий процесс, такие функции, как ГОРЯЧАЯ ПЕРЕЗАГРУЗКА позволяет перезагружать код работающего приложения без потери состояния, что значительно сокращает время разработки.

AOT (впереди времени): —

Dart — это AOT (Ahead Of Time), скомпилированный в быстрый, предсказуемый нативный код, что позволяет почти весь Flutter писать на Dart. . Код Dart (как SDK, так и ваш) заранее скомпилирован (AOT) в родную библиотеку ARM.

Это о Dart, а теперь давайте перейдем к основам Flutter.

Основы флаттера: —

Почти все является виджетом или, точнее, иерархией виджетов.

Но что такое виджет?

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

функция runApp надуйте данный виджет и прикрепите его к экрану.

Всякий раз, когда государство изменяется, он перестраивает свое описание, берет данный виджет и делает его корнем дерева виджетов.

Я сказал состояние?

Виджеты могут быть двух типов. состояние или же без гражданства, взгляните на эти различные типы виджетов, чтобы мы могли лучше понять их и узнать, какой из них использовать, когда дело доходит до определения наших собственных виджетов.

Виджеты без состояния

Виджет, который не требует изменяемого состояния или, другими словами, статический виджет . Есть случаи, когда вы будете создавать виджеты, которым не нужно управлять какой-либо формой внутреннего состояния.

Они не зависят от каких-либо изменений данных или изменений поведения. Например. Text, Icon, RaisedButton — это виджеты без сохранения состояния.

Виджеты с отслеживанием состояния

Виджет с изменяемым состоянием или другими словами динамический виджет . Они позволяют нам создавать виджеты, которые могут динамически изменять свое содержимое с течением времени. , их можно обновлять во время выполнения в зависимости от действий пользователя или изменения данных. Если виджет может изменить свое состояние во время выполнения, он будет виджетом с отслеживанием состояния.

Виджет приложения Материал: —

Как установить заголовок приложения, тему, удалить баннер отладки?

Что ж , Виджет приложения «Материал» это ответ.

MaterialApp — это виджет верхнего уровня, удобный виджет, который включает в себя ряд виджетов, которые обычно требуются для приложений по дизайну материалов. Но как насчет других стандартных элементов, таких как панель приложений, ящик? Для этого нужно понять Строительные леса .

Виджет строительных лесов: —

Scaffold реализует базовую структуру визуального макета Material Design.

![](https://cdn-images-1.medium.com/max/160
0/1*KnnEZbsOylkz28bzb7Llzw.jpeg)

Некоторые основные свойства виджета Scaffold:

  1. Панель приложений (панель инструментов)

  2. Тело (контейнер для любого представления)

  3. Ящик (DrawerLayout)

  4. Боттомнавигатионбар (Боттомнавигатионвиев)

  5. [FloatingActionButto]
    (

  6. Нижний лист

Некоторые другие важные виджеты: —

Виджет контейнера: — Удобный виджет, который сочетает в себе обычные виджеты рисования, позиционирования и изменения размера. Контейнер имеет только один дочерний элемент (обычно содержит строки или столбцы).

Попробуйте обернуть все внутри виджета-контейнера, поскольку у них есть некоторые важные свойства, такие как выравнивание, цвет, поля и отступы, и их можно рассматривать как единый объект/модуль, подразделять приложения на разделы, группировать, что упрощает настройку.

Пример:-

new Container(
  color: Colors.amber.shade400,
  alignment: FractionalOffset.center,
  child: new Row(
    children: <Widget>[
 ],

)

Важные свойства: —

выравнивание → Выровняйте child внутри контейнера.

ребенок → child содержится в контейнере.

украшение → Украшение для рисования за child.

цвет → Цвет фона, который должен быть применен к контейнеру

передний планУкрашение → Украшение для рисования перед child.

потому что н → Пустое пространство вокруг decoration а также child.

набивка → Пустое место для надписи внутри decoration. childесли он есть, помещается внутрь этого заполнения.

Виджет строки: — Строка — это виджет, используемый для горизонтального отображения дочерних виджетов. Строки имеют дочерние элементы (внутри строки можно разместить несколько виджетов).

Пример :-

new Row(
    children: <Widget>[
    new Text(‘The first text widget’, textAlign: TextAlign.center),
    new Text(‘The first text widget’, textAlign: TextAlign.center),
    new Text(‘The first text widget’, textAlign: TextAlign.center)
 ],
)

Виджет столбца: — Столбец — это виджет, используемый для вертикального отображения дочерних виджетов. У столбцов есть дочерние элементы (точно так же, как строки, они также могут содержать несколько виджетов).

Пример:-

new Column(
    children: <Widget>[
      new Text('The first line of text'),
      new Text('The second line of text'),
      new Text('The third line of text'),
    ],
)

Виджет стека: — Виджет, который размещает своих дочерних элементов относительно краев своего блока или для перекрытия содержимого.

Гибкий виджет: — Виджет, который отображает своих дочерних элементов в одномерном массиве.

Расширенный виджет: — Виджет, который расширяет дочерний элемент Row, Column или Flex.

Проверка флаттера: —

Инспектор виджетов Flutter

Фреймворк Flutter использует виджеты в качестве основного строительного блока для всего, от элементов управления (текст, кнопки, переключатели и т. д.) до макета (центрирование, отступы, строки, столбцы и т. д.). Инспектор — это мощный инструмент для визуализации и изучения Flutter этих деревьев виджетов. Это может быть полезно, когда:

  • Понимание существующих макетов
  • Диагностика проблем макета

Чтобы начать, нажмите «Выбрать виджет» на панели инструментов Flutter Inspector, а затем щелкните устройство, чтобы выбрать виджет. Выбранный виджет будет выделен на устройстве и в дереве виджетов.

Надеюсь, вам понравится статья! Оставьте комментарий ниже или напишите мне в facebook, если у вас есть какие-либо вопросы / предложения!

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *