Flutter 4.2 - Column, Row, Container

 1, Trục của column và row:








Ex:
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.stretch,

2, Sự khác biệt giữa container và column, row:




- 1 container chỉ có thể chứa 1 widget (text, button,...), còn column, row có thể chứa nhiều widget
- Sử dụng container thì có thể custom đc nhiều style (viền, bo, margin, padding, ...) còn column, row thì không
- Container có thể điều chỉnh width, height dễ dàng,... còn column, row luôn chiếm width, height nhiều nhất có thể

=> Tóm lại:
  • Dùng container khi cần custom style, align
  • Dùng row/ column khi nhiều widgets cạnh nhau
  • Kết hợp cả container, column, row để đc cả 2 yếu tố trên :lmao











Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Flutter 4.5 - Custom theme, font, image

Hình ảnh
 1, Custom theme:  return MaterialApp ( title: 'Personal Expenses' , theme: ThemeData ( primarySwatch: Colors. deepPurple , accentColor: Colors. amber ) , home: MyHomePage () , ) ; Use: color: Theme. of (context). primaryColor , 2, Custom font - Add fonts vào thư mục assets/fonts - Khai báo fonts ở pubspec.yaml ( Lưu ý: khoảng cách đầu ở  pubspec.yaml rất quan trọng, nếu thò thụt ko đúng sẽ gây ra lỗi hoặc không thể sử dụng đc dependence vừa thêm ko đúng) - Defind textTheme và appBarTheme ở main.dart theme: ThemeData ( primarySwatch: Colors. deepPurple , accentColor: Colors. amber , fontFamily: 'Quicksand' , textTheme: ThemeData . light (). textTheme .copyWith( headline6: TextStyle ( fontFamily: 'OpenSans' , fontSize: 18 , ) , ) , appBarTheme: AppBarTheme ( textTheme: ThemeData . light (). textTheme .copyWith( headline6: TextStyle ( fontFamily: 'OpenSans'...
Đọc thêm

Flutter 1.2 - Flutter Architecture

Hình ảnh
 1.2, Flutter Architecture      Không kéo thả, code UI bằng tay :v sử dụng widgets.      Tất cả mọi thứ trong màn hình đều là widgets.     Các item đều là widgets     Cả màn hình là widgets     Cả app là widgets :)) Widget Tree... Có thể đặt cờ để code iOS riêng, Android riêng.
Đọc thêm

Flutter 2.5 - First App | Building a Widget Tree

Hình ảnh
 Hello word :D - Import thư viện material package (material.dart là 1 thư viện trong sdk flutter) - Như đã đề cập: main() là 1 hàm đặc biệt, dart sẽ tự động tìm class main.dart sau đó chạy hàm này đầu tiên. - runApp(); thực hiện các công việc hậu trường :v (lấy các widget mà develop draw để hiển thị lên màn hình) nó là function thư viện flutter cung cấp :D.  - build: chịu trách nhiệm return về 1 widget để func runApp 'take it' - Trong flutter họ có định nghĩa sẵn cho chúng ta vài cái widget để sài cho tiện Trong ví dụ là MaterialApp là widget kế thừa các kiến trúc theo chuẩn design marterial, Scaffold là widget bao chứa toàn bộ code chúng ta vào trong nó ( phủ đầy giao diện chúng ta). Nói thì hơi mông lung như 1 trò đùa 😄 => Bạn nào code HTML rồi thì cứ tưởng tượng cái thẻ marterial giống như là thẻ html có thẻ head rồi nhúng css của marterial vào, còn thẻ scaffold là như thẻ body của html vậy thôi. Trong 1 thẻ widget thì sẽ có các Thộc tính đi kèm, có thể các thuộc tính đ...
Đọc thêm