diff --git a/notes/flutter_web/lib/routes.g.dart b/notes/flutter_web/lib/routes.g.dart
index f08478a7..805d95d0 100644
--- a/notes/flutter_web/lib/routes.g.dart
+++ b/notes/flutter_web/lib/routes.g.dart
@@ -46,6 +46,7 @@ import 'package:flutter_web/routes/notes/widgets/specific_widgets/button/page.da
 import 'package:flutter_web/routes/notes/widgets/container_widgets/menu/page.dart' as _menu_page;
 import 'package:flutter_web/routes/notes/widgets/container_widgets/scrollable/Dismissible/page.dart' as _Dismissible_page;
 import 'package:flutter_web/routes/notes/widgets/container_widgets/bar/page.dart' as _bar_page;
+import 'package:flutter_web/routes/notes/widgets/index/page.dart' as _index_page;
 import 'package:flutter_web/routes/notes/Improve_app/page.dart' as _Improve_app_page;
 import 'package:flutter_web/routes/notes/Improve_app/env_info/page.dart' as _env_info_page;
 import 'package:flutter_web/routes/notes/Improve_app/1.overview/page.dart' as _1_overview_page;
@@ -127,6 +128,7 @@ mixin RoutesMixin {
           ToNote('page_view'),
           ToNote('bar', page: _bar_page.build),
         ]),
+        ToNote('index', page: _index_page.build, pageAnno: _Pages.notes_widgets_index),
       ]),
       ToNote('Improve_app', page: _Improve_app_page.build, pageAnno: _Pages.notes_Improve_app, children: [
         ToNote('env_info', page: _env_info_page.build),
@@ -173,6 +175,7 @@ mixin RoutesMixin {
   late final ToNote routes_notes_widgets_container_widgets_menu = (root.find('/notes/widgets/container_widgets/menu')! as ToNote);
   late final ToNote routes_notes_widgets_container_widgets_scrollable_Dismissible = (root.find('/notes/widgets/container_widgets/scrollable/Dismissible')! as ToNote);
   late final ToNote routes_notes_widgets_container_widgets_bar = (root.find('/notes/widgets/container_widgets/bar')! as ToNote);
+  late final ToNote routes_notes_widgets_index = (root.find('/notes/widgets/index')! as ToNote);
   late final ToNote routes_notes_Improve_app = (root.find('/notes/Improve_app')! as ToNote);
   late final ToNote routes_notes_Improve_app_env_info = (root.find('/notes/Improve_app/env_info')! as ToNote);
   late final ToNote routes_notes_Improve_app_overview = (root.find('/notes/Improve_app/1.overview')! as ToNote);
@@ -188,5 +191,6 @@ class _Pages {
   static const notes = NoteAnnotation(label: "笔记");
   static const notes_material3_color_roles = NoteAnnotation(label: "Color roles", publish: true);
   static const notes_widgets_specific_widgets_button = NoteAnnotation(label: "按钮", publish: true);
+  static const notes_widgets_index = NoteAnnotation(label: "Widgets cheatsheets", publish: true);
   static const notes_Improve_app = NoteAnnotation(label: "完善应用的技术");
 }
diff --git a/notes/flutter_web/lib/routes/notes/note.md b/notes/flutter_web/lib/routes/notes/note.md
index d1262fac..c973e12e 100644
--- a/notes/flutter_web/lib/routes/notes/note.md
+++ b/notes/flutter_web/lib/routes/notes/note.md
@@ -1,4 +1,4 @@
-# flutter 大纲
+# flutter速查
 
 >  **📣Tip:**
 > Components are interactive building blocks for creating a user interface.
@@ -163,7 +163,8 @@
     - **Material**
     - **InkResponse**
       - **InkWell**
-  - **Card**:Card组件虽然不是纯粹的布局组件，但因其提供了统一的矩形框样式和阴影效果，常用于构建卡片式的布局单元，特别是在列表和网格布局中。
+  - **Card**: 虽然不是纯粹的布局组件，但因其提供了统一的矩形框样式和阴影效果，常用于构建卡片式的布局单元，特别是在列表和网格布局中。
+    - 【原理】内部包了个`Material`
 
 - 隐藏&可见性
   - **Opacity**: 是一种可以改变其子组件透明度的布局组件。它并不会影响子组件的实际尺寸和布局，而是控制子组件的内容可视性。
diff --git a/notes/flutter_web/lib/routes/notes/widgets/index/page.dart b/notes/flutter_web/lib/routes/notes/widgets/index/page.dart
new file mode 100644
index 00000000..149bc202
--- /dev/null
+++ b/notes/flutter_web/lib/routes/notes/widgets/index/page.dart
@@ -0,0 +1,232 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+import 'package:you_flutter/better_ui.dart';
+import 'package:you_flutter/note.dart';
+
+@NoteAnnotation(label: "Widgets cheatsheets", publish: true)
+void build(BuildContext context, Cell print) {
+  Widget card() {
+    var colors = Theme.of(context).colorScheme;
+    return Wrap(
+      children: [
+        Card(
+          elevation: 4,
+          child: Container(
+            width: 80,
+            height: 80,
+            alignment: Alignment.center,
+            padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
+            child: const Text('Elevated'),
+          ),
+        ),
+        Card(
+          elevation: 0,
+          color: colors.surfaceDim,
+          child: Container(
+            width: 80,
+            height: 80,
+            alignment: Alignment.center,
+            child: const Text('Filled'),
+          ),
+        ),
+        Card(
+          elevation: 4,
+          shape: RoundedRectangleBorder(
+            side: BorderSide(color: colors.outlineVariant),
+            borderRadius: const BorderRadius.all(Radius.circular(12)),
+          ),
+          child: Container(
+            width: 80,
+            height: 80,
+            alignment: Alignment.center,
+            child: const Text('Border'),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget container() {
+    var colors = Theme.of(context).colorScheme;
+    return Wrap(
+      children: [
+        Container(
+            width: 100,
+            height: 100,
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              color: colors.surface,
+              boxShadow: [
+                BoxShadow(
+                  color: colors.shadow.withOpacity(0.2), // 阴影颜色
+                  spreadRadius: 2, // 阴影扩散范围
+                  blurRadius: 2, // 阴影模糊程度
+                  offset: const Offset(2, 1), // 阴影偏移量，水平和垂直方向
+                ),
+              ],
+              borderRadius: BorderRadius.circular(4.0),
+            ),
+            child: const Text("模仿Card\nImitate Card") // Your widget here
+            )
+      ],
+    );
+  }
+
+  var x = Column(
+    children: [
+      Level1MasonryLayout(
+        title: "xxx",
+        cellWidth: 300,
+        children: [
+          CellView(title: "Card", child: card()),
+          CellView(title: "Container", child: container()),
+          CellView(title: "Card", child: card()),
+          CellView(title: "Container", child: container()),
+          CellView(title: "Card", child: card()),
+          CellView(title: "Container", child: container()),
+          CellView(title: "Card", child: card()),
+          CellView(title: "Container", child: container()),
+        ],
+      ),
+      Level1GridLayout(
+        title: "xxx",
+        cellWidth: 300,
+        children: [
+          CellView(title: "Card阿斯顿发", child: card()),
+          CellView(title: "Container", child: container()),
+          CellView(title: "Card", child: card()),
+          CellView(title: "Container", child: container()),
+          CellView(title: "Card", child: card()),
+          CellView(title: "Container", child: container()),
+          CellView(title: "Card", child: card()),
+          CellView(title: "Container", child: container()),
+        ],
+      ),
+    ],
+  );
+
+  print(x);
+}
+
+class CellView extends StatelessWidget {
+  final String title;
+  final Widget child;
+
+  const CellView({super.key, required this.title, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    var colors = Theme.of(context).colorScheme;
+    return Container(
+      decoration: BoxDecoration(color: colors.surfaceContainer, borderRadius: BorderRadius.circular(8.0), border: Border.all(width: 1, color: colors.outlineVariant)),
+      child: Column(
+        children: [
+          AppBar(
+            toolbarHeight: 36,
+            elevation: 1,
+            backgroundColor: colors.surfaceContainer,
+            title: Text(title),
+            actions: <Widget>[
+              IconButton(icon: const Icon(Icons.code), onPressed: () {}),
+              IconButton(icon: const Icon(Icons.fullscreen), onPressed: () {}),
+            ],
+          ),
+          Container(
+            padding: const EdgeInsets.all(12),
+            width: 350,
+            child: child,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class Level1GridLayout extends StatelessWidget {
+  final String title;
+  final List<CellView> children;
+  final double? cellWidth;
+
+  const Level1GridLayout({super.key, required this.title, this.cellWidth, required this.children});
+
+  @override
+  Widget build(BuildContext context) {
+    var colors = Theme.of(context).colorScheme;
+    var textTheme = Theme.of(context).textTheme;
+
+    return LayoutBuilder(builder: (context, constraints) {
+      var crossAxisCount = cellWidth == null ? 1 : (constraints.maxWidth / cellWidth!).toInt();
+      crossAxisCount = crossAxisCount <= 1 ? 1 : crossAxisCount;
+
+      return Column(
+        children: [
+          Text(title, style: textTheme.headlineLarge),
+          Container(
+            padding: const EdgeInsets.all(12),
+            width: constraints.maxWidth,
+            decoration: BoxDecoration(
+              color: colors.surfaceContainerLow,
+              borderRadius: BorderRadius.circular(8.0),
+            ),
+            child: GridView.count(
+              physics: const NeverScrollableScrollPhysics(),
+              // to disable GridView's scrolling
+              shrinkWrap: true,
+              // You won't see infinite size erro
+              primary: false,
+              padding: const EdgeInsets.all(20),
+              crossAxisSpacing: 10,
+              mainAxisSpacing: 10,
+              crossAxisCount: crossAxisCount,
+              children: <Widget>[
+                ...children,
+              ],
+            ),
+          ),
+        ],
+      );
+    });
+  }
+}
+
+class Level1MasonryLayout extends StatelessWidget {
+  final String title;
+  final List<CellView> children;
+  final double? cellWidth;
+
+  const Level1MasonryLayout({super.key, required this.title, this.cellWidth, required this.children});
+
+  @override
+  Widget build(BuildContext context) {
+    var colors = Theme.of(context).colorScheme;
+    var textTheme = Theme.of(context).textTheme;
+
+    return LayoutBuilder(builder: (context, constraints) {
+      var crossAxisCount = cellWidth == null ? 1 : (constraints.maxWidth / cellWidth!).toInt();
+      crossAxisCount = crossAxisCount <= 1 ? 1 : crossAxisCount;
+      return Column(
+        children: [
+          Text(title, style: textTheme.headlineLarge),
+          Container(
+            padding: const EdgeInsets.all(12),
+            width: constraints.maxWidth,
+            decoration: BoxDecoration(
+              color: colors.surfaceContainerLow,
+              borderRadius: BorderRadius.circular(8.0),
+            ),
+            child: MasonryGridView.count(
+              physics: const NeverScrollableScrollPhysics(),
+              // to disable GridView's scrolling
+              shrinkWrap: true,
+              crossAxisCount: crossAxisCount,
+              crossAxisSpacing: 16.0,
+              mainAxisSpacing: 16,
+              itemBuilder: (context, index) => children[index],
+              itemCount: children.length,
+            ),
+          ),
+        ],
+      );
+    });
+  }
+}
diff --git a/notes/flutter_web/lib/routes/notes/x.note_inside/note_api_thinking/format_3_real_api.dart b/notes/flutter_web/lib/routes/notes/x.note_inside/note_api_thinking/format_3_real_api.dart
index 09a9f43a..553d1336 100644
--- a/notes/flutter_web/lib/routes/notes/x.note_inside/note_api_thinking/format_3_real_api.dart
+++ b/notes/flutter_web/lib/routes/notes/x.note_inside/note_api_thinking/format_3_real_api.dart
@@ -9,7 +9,9 @@ import 'package:you_flutter/note.dart';
 ///   - 可信度也较高（Trace总觉得有点不太靠谱，收集定位 source code 也就行了），
 ///   - 甚至可以作为通用架构来做note外的开发
 void build(BuildContext context, Cell print) {
-  print.addCellWith(Cell(title: Text("ssss"), (print) {
-    print("ss");
-  }));
+  print.addCellWith(
+    Cell(title: Text("ssss"), (print) {
+      print("ss");
+    }),
+  );
 }
diff --git a/notes/flutter_web/pubspec.yaml b/notes/flutter_web/pubspec.yaml
index 788f8336..050bce8a 100644
--- a/notes/flutter_web/pubspec.yaml
+++ b/notes/flutter_web/pubspec.yaml
@@ -40,6 +40,7 @@ dependencies:
   _you_dart_internal: ^0.0.6-dev.3
   you_dart: ^0.0.4
   you_flutter: ^0.0.4
+  flutter_staggered_grid_view: ^0.7.0
 
 
 dev_dependencies:
diff --git a/packages/you_flutter/lib/note.dart b/packages/you_flutter/lib/note.dart
index 4fe6ef04..89c0ebca 100644
--- a/packages/you_flutter/lib/note.dart
+++ b/packages/you_flutter/lib/note.dart
@@ -11,4 +11,5 @@ export 'src/note/contents/markdown_content.dart' show MD;
 
 export 'src/note/visualization/material_colors.dart' show MaterialColorRoles;
 
-export 'src/note/note_tree_view.dart' show NoteTreeView;
\ No newline at end of file
+export 'src/note/note_tree_view.dart' show NoteTreeView;
+
diff --git a/packages/you_flutter/lib/src/better_ui.dart b/packages/you_flutter/lib/src/better_ui.dart
index c6fd2677..7b408fe8 100644
--- a/packages/you_flutter/lib/src/better_ui.dart
+++ b/packages/you_flutter/lib/src/better_ui.dart
@@ -259,6 +259,15 @@ extension StyleExtension on Widget {
     );
   }
 
+  Widget fractionallySizedBox$({double? widthFactor, double? heightFactor, Alignment alignment = Alignment.center}) {
+    return FractionallySizedBox(
+      alignment: alignment,
+      widthFactor: widthFactor,
+      heightFactor: heightFactor,
+      child: this,
+    );
+  }
+
   /// [minWidth]The minimum width constraint to give the child. Set this to null (the
   /// default) to use the constraint from the parent instead.
   /// [maxWidth]The maximum width constraint to give the child. Set this to null (the
@@ -330,7 +339,8 @@ extension StyleExtension on Widget {
     }
 
     return LayoutBuilder(builder: (context, constraints) {
-      debugPrint("\$debugLayoutBuilder: this:$runtimeType, constraints:$constraints, this:$this");
+      var screenWidth = MediaQuery.of(context).size.width;
+      debugPrint("\$debugLayoutBuilder: screenWidth:$screenWidth, this:$runtimeType, constraints:$constraints, this:$this");
       return this;
     });
   }
diff --git a/packages/you_flutter/lib/src/note/note.dart b/packages/you_flutter/lib/src/note/note.dart
index 26c60614..aa4d227f 100644
--- a/packages/you_flutter/lib/src/note/note.dart
+++ b/packages/you_flutter/lib/src/note/note.dart
@@ -71,7 +71,7 @@ base class ToNote extends To {
 
   @nonVirtual
   bool containsPublishNode({bool includeThis = true}) {
-    if(includeThis){
+    if (includeThis) {
       if (isPublish) return true;
     }
     for (var c in children) {