Viết ứng dụng Hello World – Flutter
Trong bài viết này tôi sẽ hướng dẫn các bạn viết ứng dụng cơ bản nhất Hello World với Flutter.
Để bắt đầu, Các bạn tạo một project Flutter mới, bằng cách bật Android Studio đã cài Flutter lên và chọn : Start a new Flutter Project
Chọn Flutter Application :
Sau khi click vào tạo project mới, đặt tên là : hello_world
Sau khi tạo xong, trong file main.dart sẽ hiển thị như bên dưới:
Xoá hết code trong file main.dart và thêm đoạn code dưới đây :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( // Tạo Appbar appBar: AppBar( title: Text("Hello World"), ), // Tạo nội dung App là Hello World và hiển thị ở giữa body: Center( child: Text("Hello World !"), ), ), ); } } |
Dưới đây là kết quả :
Đó là một cách sử dụng : StatelessWidget
Còn cách thứ 2, tôi sẽ sử dụng StatefulWidget:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget{ @override State<StatefulWidget> createState() { // TODO: implement createState return _MyAppState(); } } class _MyAppState extends State<MyApp>{ @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( // Gỡ title debug bên phải màn hình debugShowCheckedModeBanner: false, home: Scaffold( // Tạo Appbar appBar: AppBar( title: Text("Hello World"), ), // Tạo nội dung App là Hello World và hiển thị ở giữa body: Center( child: Text("Hello World !"), ), ), ); } } |
Dưới đây là kết quả :
Qua ứng dụng Hello World Flutter trên, Các bạn có thể đọc code và sẽ hiểu được cơ bản về cấu trúc của chương trình Flutter.
Có một điều chú ý, khi bắt đầu một ứng dụng trong phần buidWidget các bạn nên dùng : MaterialApp sau đó mới nên dùng các widget khác như : Scaffold, Container..
Chúc các bạn có được nhiều kiến thức từ blog của Báo Flutter !
