Чтобы создать простое приложение Hello World во Flutter, выполните следующие действия.

ШАГ 1. После того, как вы установили IntelliJ IDE и настроили Flutter и Dart, запустите IntelliJ IDE.

ШАГ 2. В появившемся диалоговом окне приветствия при запуске нажмите Создать новый проект. Ваш экран должен выглядеть так, как показано ниже.

ШАГ 3. В левой части появившегося окна нового проекта выберите флаттер и нажмите «Далее». Смотрите окно ниже:

ШАГ 4. В следующем диалоговом окне нового проекта дайте название вашему новому проекту, например, «flutter_hello_world», написанное строчными буквами, выберите местоположение проекта и нажмите «Готово». Смотрите окно ниже:

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

ШАГ 5. Выделите и удалите весь код на экране.

ШАГ 6: Обратите внимание, что файл «widget_test.dart» в тестовой папке панели проекта указывает на ошибку, удалите файл «widget_test.dart» по умолчанию. Теперь ваш проект должен быть свободен от какой-либо ошибки.

ШАГ 7: Теперь внутри файла main. dart» импортируйте библиотеку flutter material.dart, как показано ниже; это потому, что все приложение флаттера основано на дизайне материалов, чтобы мы могли подражать реальному миру.

import 'package:flutter/material.dart';

ШАГ 8. Создайте метод main, который является точкой входа для каждого приложения флаттера:

void main(){
  
}

ШАГ 9: внутри основного метода создайте метод «runApp()», который исходит из фреймворка флаттера и должен вызываться в основном методе, он берет данный виджет и делает его корнем дерева виджетов. . Теперь ваш код должен выглядеть следующим образом:

void main(){
  runApp();
}

ШАГ 10.Вы можете видеть, что метод «runApp()» показывает ошибку, потому что вам нужно передать контейнер в метод, который будет корневым контейнером. Теперь создайте контейнер Center внутри метода runApp, чтобы центрировать содержимое на экране.

void main(){
  runApp(
    new Center()
  );
}

ШАГ 11. Теперь добавьте текстовый виджет в качестве дочернего элемента контейнера Center и добавьте свойство textDirection, которое является обязательным свойством при создании текстового виджета. И, наконец, ваш код должен выглядеть так.

import 'package:flutter/material.dart';
void main(){
  runApp(
    new Center(
      child: new Text(
        "Hello World!",
        textDirection: new TextDirection.ltr,
      )
    )
  );
}

Теперь запустите вашу программу.

Вау! вот и все, это выглядит здорово; потому что мы сделали это с нуля, и это дает нам чувство выполненного долга. Но это не лучшее приложение, которое вы когда-либо создавали, потому что это просто текст без фона.

Чтобы сделать наше приложение Hello World красочным, мы собираемся использовать компоненты материального дизайна.

ШАГ 12. Замените виджет «new Center()» на «new Material()», как показано ниже:

void main(){
  runApp(
    new Material()
  );
}

ШАГ 13. Внутри виджета «Материал» мы можем добавить множество свойств, но мы просто добавим только цвет и дочернее свойство, как показано ниже:

void main(){
  runApp(
    new Material(
      color: Colors.deepOrange,
      child: new Center(
        child: new Text(
          "Hello World!",
          textDirection: new TextDirection.ltr,
        )
      )
  );
}

Теперь снова запустите ваше приложение.

Поздравляем! Вы успешно создали свое приложение Flutter Hello World.