Introduction Flutter

1. Project Hello World

1.1 Create project

Mở termial trong visual code và tạo mới project đặt tên là hello_app

flutter create --empty hello_app

1.2 Main code

Để tắt được chữ Debug nằm bên góc phải màn hình ta dùng lệnh debugShowCheckedModeBanner: false

import 'package:flutter/material.dart';
void main() {
  runApp(const MainApp());
}
class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Center(child: Text('Hello World!'))),
    );
  }
}

1.3 Run Project

Để chạy được project ta phải truy cập vào thư mục hello_app bằng cách dùng lệnh sau

cd hello_app

Để chạy được project ta dùng lệnh sau

flutter run

Để restart lại project ta dùng lệnh sau

ctrl + r

2. Project Hello Name

2.1 Create Project Hello Name

flutter create --empty hello_name_app

2.2 Create page Name

Tạo mới tập tin lib/NamePage.dart với nội dung sau:

import 'package:flutter/material.dart';
class NamePage extends StatefulWidget {
  final String title;
  const NamePage({super.key, required this.title});
  @override
  State<StatefulWidget> createState() => _NamePageState();
}
class _NamePageState extends State {
  final _nameController = TextEditingController();
  String? _name;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Column(
        children: [
          TextField(
            controller: _nameController,
            decoration: InputDecoration(
              labelText: 'Name',
              hintText: 'Enter your name',
            ),
          ),
          ElevatedButton(onPressed: _hello, child: Text('Send')),
          if (_name != null) Text('Hello $_name'),
        ],
      ),
    );
  }
  void _hello() => setState(() => _name = _nameController.text.trim());
}

Khai báo page

Vào file main.dart khai báo sử dụng NamePage trong main.dart như sau

void main() {
  runApp(const MainApp());
}
class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      //home: Scaffold(body: Center(child: Text('Hello World!'))),
      home: NamePage(title: 'Hello Name'),
    );
  }
}

Run project

sử dụng lệnh sau để chạy project

flutter run