Tạo một ứng dụng Flutter

Khởi tạo một Project mới

Sau khi khởi tạo bằng IDE, ta sẽ có được một project với cấu trúc:

Cấu trúc cơ bản của project

Tiếp tục, thay đổi nội dung của file lib/main.dart như bên dưới

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return new MaterialApp(
         title: 'DotB CodeLabs',
         theme: new ThemeData(
           primarySwatch: myTheme.mainColor,
           canvasColor: Colors.transparent,
           hintColor: myTheme.loginGradientEnd,
           fontFamily: 'OpenSansLight',
         ),
         debugShowCheckedModeBanner: false,
         initialRoute: '/',
         routes: {
           '/': (context) => HomeScreen(),
         },
       );
     }
   }

Trong đó:

• Material App:. Material là ngôn ngữ thiết kế trực quan tiêu chuẩn trên thiết bị di động và web. Flutter cung cấp một tập hợp các widget Material phong phú.

• Hàm Main: Xác định ký hiệu mũi tên béo (=>). Sử dụng ký hiệu mũi tên béo cho các hàm hoặc phương thức một dòng.

• Theme: Cấu hình màu sắc, font chữ, giao diện mặc định của ứng dụng.

• InitialRoute: Thiết lập màn hình khởi tạo (chạy đầu tiên) của ứng dụng.

• Routes: Định danh các màn hình để gọi chuyển màn hình trong ứng dụng.

Tạo một màn hình mới

Một màn hình giao diện trong Flutter có thể tạo theo cấu trúc stful :

Tạo giao diện với stful

Chỉnh sửa đoạn code để có được giao diện trang chủ như bên :

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Welcome to Flutter',
       home: Scaffold(
         appBar: AppBar(
           title: Text('Welcome to Flutter'),
         ),
         body: Center(
           child: Text('Hello World'),
         ),
       ),
     );
   }
}

Thành quả đạt được một màn hình gồm một thanh AppBar có tiêu đề "Welcome to Flutter" cùng dòng chữ ở giữa phần body "Hello World".

Màn hình kết quả