Создание первого приложения на Flutter
Пошагово создайте простое приложение Flutter «Hello World», разберитесь в структуре проекта и функции горячей перезагрузки.
«Создание первого приложения на Flutter» — бесплатный урок Flutter Mobile Development на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Flutter Mobile Development, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Flutter Mobile Development содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Your First Flutter App!
Time to build your first Flutter app — a simple Hello World to learn the workflow. You’re about to see why Flutter feels so fast.
Create a New Project
Run flutter create to scaffold a new project, then cd into the folder. One command and you’re ready to code.
flutter create my_first_app
cd my_first_appUnderstand Project Structure
Flutter scaffolds several folders. The ones that matter: lib/main.dart (your code), pubspec.yaml (dependencies), and the android/ — ios/ platform dirs.
The App Entry Point: main.dart
Every app starts at main(). Inside it, runApp() takes your root widget and attaches it to the screen.
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Launching App...', // Text displayed directly
textDirection: TextDirection.ltr, // Required for root Text widget
style: TextStyle(color: Colors.blue, fontSize: 20),
),
),
);
}Building Your MyApp Widget
Wrap your app in a root widget, often MyApp. For UI that doesn’t change, use a StatelessWidget — it just needs a build method describing the UI.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// This widget will define the app's look and feel
return const Placeholder(); // A temporary visual marker
}
}MaterialApp & Scaffold Basics
MaterialApp adds Material Design; inside it Scaffold gives you the basic layout — an AppBar on top and a body for content.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.blue), // Sets primary color
home: Scaffold(
appBar: AppBar(
title: const Text('My First App'), // Text in the app bar
),
body: const Center(
child: Text(
'Hello, CoddyKit!', // Our main content text
style: TextStyle(fontSize: 24),
),
),
),
);
}
}Running Your New App
App ready? Run it. Start an emulator, simulator, or plug in a device, then run flutter run from the project root.
flutter runMeet Hot Reload!
Hot Reload injects code changes into a running app almost instantly — no full restart, no lost state. Just save your .dart file to trigger it.
Hot Reload in Action
Try it yourself: tweak the AppBar text, the body, or the theme color below, then save and watch Hot Reload update the running app live.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.green), // Changed color!
home: Scaffold(
appBar: AppBar(
title: const Text('My Updated App'), // Changed text!
),
body: const Center(
child: Text(
'Hot Reloaded!', // Changed text and size!
style: TextStyle(fontSize: 28, color: Colors.red),
),
),
),
);
}
}Hot Reload vs. Hot Restart
Hot Reload injects code and keeps your app’s state — great for UI tweaks. Hot Restart rebuilds from scratch and wipes state, for bigger changes.
Quick Check: Hot Reload
You've seen Flutter's hot reload in action. Let's test your understanding!
Recap: First Flutter App
Congrats! You built and ran your first Flutter app — flutter create, the main.dart structure, MaterialApp + Scaffold, and the power of Hot Reload.
Часто задаваемые вопросы
Урок «Создание первого приложения на Flutter» бесплатный?
Да — полный текст урока «Создание первого приложения на Flutter» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Flutter Mobile Development, подпишись на CoddyKit PRO. Курс Flutter Mobile Development содержит 4 уроков всего.
Чему я научусь в уроке «Создание первого приложения на Flutter»?
Пошагово создайте простое приложение Flutter «Hello World», разберитесь в структуре проекта и функции горячей перезагрузки. Ты практикуешь Flutter Mobile Development с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Flutter Mobile Development?
Предыдущий опыт не требуется. Flutter Mobile Development на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Создание первого приложения на Flutter»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Flutter Mobile Development?
Да. Каждый урок Flutter Mobile Development включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Экосистема и настройка Flutter
- Основы Dart для Flutter
- Создание первого приложения на Flutter
- Асинхронное программирование с Futures и async/await