Flutter 4.4 - Column SingleChildScrollView , ListView, ListView.builder()

SingleChildScrollView dùng để cuộn column

Column và SingleChildScrollView: 


ListView: có thể cuộn mà ko cần SingleChildScrollView 



ListView.builder():




So sánh các 3 loại cuộn trên:



ListView tương đương với Column + SingleChildScrollView: đều có thể cuộn, nhưng sẽ load hết các item lên view => hiệu năng kém (giống ListView trong android)

ListView.builder(); chỉ load những item hiển thị lên màn hình  => tăng hiệu năng (Giống vs RecyclerView trong android)




Nhận xét

Đăng nhận xét

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

Flutter 7.1 - Navigating to a new page, GridView, Pass data by routes, Pop data

Hình ảnh
 1, Grid view: @override Widget build (BuildContext context) { return Scaffold ( appBar: AppBar ( title: const Text ( 'DeliMeal' ) , ) , body: GridView ( // cross ngang, main d ọ c. N ế u có quá nhi ề u item thì dùng GridView.buider s ẽ t ố i ư u performance h ơ n children: DUMMY_CATEGORIES .map((catData) => CategoriesItem ( catData. title , catData. color , )) .toList() , padding: const EdgeInsets . all ( 20 ) , gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent ( // xác đ ị nh chi ề u r ộ ng t ố i đa c ủ a gridview maxCrossAxisExtent: 200 , // chi ề u r ộ ng t ố i đa c ủ a 1 item childAspectRatio: 3 / 2 , // t ỉ l ệ 2 c ạ nh item crossAxisSpacing: 20 , // kho ả ng cách gi ữ a các item theo chi ề u ngang mainAxisSpacing: 20 , // kho ả ng cách gi ữ a các item theo chi ề u d ọ c ) , ) , ) ; } 2, Navigating to ...
Đọc thêm

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 5.1 - Responsive & Adaptive

 1, Cách tính height, width widget: - Khai báo 1 biến đựng widget : Ví dụ:  final appBar = AppBar ( // khai báo appBar đ ể có th ể l ấ y chi ề u cao c ủ a appbar : appBar.preferredSize title: Text ( 'Personal Expenses' ) , actions: [ // btn add ở thanh appbar IconButton ( onPressed: () { _startAddNewTransaction(context) ; } , icon: Icon (Icons. add ) , ) , ] , ) ; - Lấy chiều cao bằng cách :  appBar. preferredSize . height 2, Height, witdh màn hình: MediaQuery. of (context). size . height MediaQuery. of (context). size . width Ngoài ra còn tính đc pixel, padding,... bằng cách  MediaQuery. of (context).*something* *Nên tạo biến mediaQuery sử dụng lại để ko phải khởi tạo nhiều lần => hiệu suất kém Chỉ sử dụng mediaQuery khi thực sự cần thiết, nên tách các widget cần sử dụng đến mediaQuery sang 1 class riêng để tránh rebuild ... (giải thích rõ hơn ở bài sau). final mediaQuery = MediaQuery. of (context) ; 3, Set portrai...
Đọc thêm