CÁCH XÂY DỰNG MÀN HÌNH ỨNG DỤNG FLUTTER

 https://baoflutter.com/cach-xay-dung-man-hinh-ung-dung-flutter/

Trong bài viết về Widget, chúng ta đã biết rằng màn hình ứng dụng được tạo bởi các Widget lắp ghép lại với nhau. Vì vậy việc xây dựng màn hình ứng dụng Flutter chính là việc tạo ra và sử dụng các Widget, lắp ráp chúng lại với nhau, trong hàm build:

1 2 3 4 5 6

@override   Widget build(BuildContext context) {     return Scaffold(      ..... ); }

Sau khi đọc xong bài viết này các bạn sẽ nắm được tư duy xây dựng màn hình ứng dụng Flutter.

Cách sử dụng các Widget để xây dựng màn hình ứng dụng Flutter

Mỗi Widget có sẵn trong Flutter SDK hay Widget được tạo bởi người lập trình đều có một cách sử dụng tương tự nhau.
Một Widget có thể là con hoặc là cha của Widget khác
Ví dụ:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

body: Center(       // Tạo cột         child: Column(         // Căn trục ở vị trí giữa           mainAxisAlignment: MainAxisAlignment.center,           children: <Widget>[             // Hàng một             Text(               'You have pushed the button this many times:',             ),             // Hàng 2             Text(               '$_counter',               style: Theme.of(context).textTheme.headline4,             ),           ],         ),       ),

Trong ví dụ trên có 3 Widget là : Center, Column, Text
Widget “Column” là con của Center và là cha của hai Text
Việc kết nối giữa các widget bằng từ khóa: child: hay children:, đối với Widget MaterialApp kết nối với widget con bằng home:, Widget Scaffold kết nối với Widget con bằng: body:
Cụ thể :
+ child: Dùng trong widget chỉ có thể có 1 widget con, ví dụ: Center, Container, SizedBox…
+ children: Dùng trong widget có thể có nhiều widget con, ví dụ: Row, Column, Stack, ListView, GridView ..
+ home: Dùng trong Widget “MaterialApp” – Widget này thường được dùng một lần ban đầu trong hầu hết các ứng dụng, widget chứa các widget mà rất cần thiết trong tạo dựng ứng dụng.(material design).
+ body: Dùng trong Widget “Scaffold” – Widget này được dùng để tạo cấu trúc layout màn hình. Thường được sử dụng khi tạo mỗi màn hình.

Thực hành xây dựng màn hình ứng dụng Flutter

Xây dựng màn hình bên dưới :

Phân tích

+ Màn hình bên dưới gồm 1 widget Container chứa 4 Widget khác là : 2 TextField, 1 Text và một Button.
+ Bốn Widget kia sếp theo cột trong Container
+ Container kia ở giữa màn hình.

Giải pháp
Tạo Container có widget con là một cột , trong cột đó có chứa các Widget con là : 2 TextField và 1 widget Text, 1 widget RaisedButton.

1 2 3 4 5 6 7 8 9 10

Container( child: Column(    children: <Widget>[    TextField(),    TextField(),    Text(),    RaisedButton(),     ] ) )

Triển khai

– Bắt đầu 1 ứng dụng chúng ta luôn bắt đầu với việc tạo màn hình ứng dụng với MaterialApp và Scaffold với material design.

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

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(       home: Scaffold(      // Đặt Container ở đây          ),      ); } }

Vì Container nằm ở giữa nên chúng ta đặt ở Center, kết quả cuối là:

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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

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(         home: Scaffold(           body: Center (           child: Container(             // Tạo màu cho Container             color: Colors.lightBlue,              // Tạo kích thước của Container              width: 300,              height: 300,              child: Column(             children: <Widget>[                 TextField(                 decoration: InputDecoration(                   border: OutlineInputBorder(),                   labelText: "TextField 1"                 ),               ),                 TextField(                 decoration: InputDecoration(                     border: OutlineInputBorder(),                     labelText: "TextField 2"                 ),               ),                // Tạo khoảng cách giữa TextField và Text               SizedBox(height: 20),                 Text("Text Widget "),               // Tạo khoảng cách giữa Text và RaisedButton               SizedBox(height: 20),                 RaisedButton(                 child: Text("Raise Button"),               ),             ],           ),           ),         ),       ),     );   }   }

Kết luận: Như vậy các bạn đã hiểu được cơ bản cách xây dựng màn hình ứng dụng Flutter
Màn hình ứng dụng được tạo nên bởi các Widgets , được ghép với nhau trong hàm build.
Widget có thể là cha của widget này và là con của widget khác. Chúng liên kết với nhau bằng các từ khoá: child, children, home, body