docs: ReadMe Correction.

mathrunet · Feb 27, 2023 · 4aff41c · 4aff41c
1 parent 3c9b32e
commit 4aff41c
Show file tree

Hide file tree

Showing 8 changed files with 329 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -923,12 +923,56 @@ Modal.confirm(
 );
 ```
 
+## Responsive layout
+
+It is possible to implement a responsive grid layout as follows.
+
+```dart
+ResponsiveBuilder(
+  builder: (context) => [
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          lg: 12,
+          child: Container(
+            color: Colors.red,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.green,
+            height: 100,
+          ),
+        ),
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.blue,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+  ],
+);
+```
+
 For other details, please see the package details page.
 
 katana_ui
 
 [https://pub.dev/packages/katana_ui](https://pub.dev/packages/katana_ui)
 
+katana_responsive
+
+[https://pub.dev/packages/katana_responsive](https://pub.dev/packages/katana_responsive)
+
 ## Authentication
 
 For user registration and authentication, use the `appAuth` object in main.dart.

diff --git a/packages/katana_responsive/README.md b/packages/katana_responsive/README.md
@@ -23,3 +23,100 @@
 [[YouTube]](https://www.youtube.com/c/mathrunetchannel) | [[Packages]](https://pub.dev/publishers/mathru.net/packages) | [[Twitter]](https://twitter.com/mathru) | [[LinkedIn]](https://www.linkedin.com/in/mathrunet/)
 
 ---
+
+# Introduction
+
+While Flutter has the advantage of supporting various platforms, it has the disadvantage of developers being troubled by differences in UI for each platform.
+
+When developing for web or desktop, you also need to consider tablet UI, which increases development costs.
+
+Since Flutter widgets are platform independent, they cannot realize platform-specific UIs as they are. Therefore, developers need to customize the UI for each platform.
+
+Katana Responsive is a Flutter package that supports responsive design.
+
+You can develop with one code for web, iOS, Android, and desktop, and the display will change according to the screen size, so developers do not need to customize the UI for each platform.
+
+Using this package allows you to develop without worrying about differences in UI between platforms.
+
+This package is based on Bootstrap, a famous CSS layout framework.
+
+You can specify a 12-column grid layout, and the screen layout will naturally restructure from horizontal to vertical according to the screen width.
+
+# Installation
+
+Import the following package.
+
+```
+flutter pub add katana_responsive
+
+```
+
+# Implementation
+
+## Grid design
+
+Please refer to Bootstrap's page for the basic concepts.
+
+[https://getbootstrap.com/docs/5.3/layout/breakpoints/](https://getbootstrap.com/docs/5.3/layout/breakpoints/)
+
+In this package, you can build a grid design by combining widgets in the form of `ResponsiveBuilder` → `ResponsiveRow` → `ResponsiveCol`.
+
+You can specify how many of the 12 columns to divide into at each breakpoint `xs`, `sm`, `md`, `lg`, `xl`, `xxl` in `ResponsiveCol`.
+
+```dart
+ResponsiveBuilder(
+  builder: (context) => [
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          lg: 12,
+          child: Container(
+            color: Colors.red,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.green,
+            height: 100,
+          ),
+        ),
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.blue,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+  ],
+);
+
+```
+
+## Display/hide by screen size
+
+You can use the `ResponsiveVisibility` widget to control the display/hide of widgets at each breakpoint.
+
+By specifying the conditions for `visible` `tier`, you can display widgets only when `true`.
+
+For example, you can display a hamburger menu only on mobile screens.
+
+```dart
+ResponsiveVisibility(
+  visible: (tier) => tier <= ResponsiveGridTier.xs,
+  child: IconButton(
+    color: Colors.white,
+    icon: const Icon(Icons.add),
+    onPressed: () {},
+  ),
+);
+
+```
+
diff --git a/packages/katana_responsive/pubspec.lock b/packages/katana_responsive/pubspec.lock
@@ -201,9 +201,10 @@ packages:
   katana:
     dependency: "direct main"
     description:
-      path: "../katana"
-      relative: true
-    source: path
+      name: katana
+      sha256: "9a3ec047c35ec88e027139e88ce45202b022dd2111b38848c85159101b0028ce"
+      url: "https://pub.dev"
+    source: hosted
     version: "1.0.5"
   lints:
     dependency: transitive

diff --git a/packages/masamune/README.md b/packages/masamune/README.md
@@ -923,12 +923,56 @@ Modal.confirm(
 );
 ```
 
+## Responsive layout
+
+It is possible to implement a responsive grid layout as follows.
+
+```dart
+ResponsiveBuilder(
+  builder: (context) => [
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          lg: 12,
+          child: Container(
+            color: Colors.red,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.green,
+            height: 100,
+          ),
+        ),
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.blue,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+  ],
+);
+```
+
 For other details, please see the package details page.
 
 katana_ui
 
 [https://pub.dev/packages/katana_ui](https://pub.dev/packages/katana_ui)
 
+katana_responsive
+
+[https://pub.dev/packages/katana_responsive](https://pub.dev/packages/katana_responsive)
+
 ## Authentication
 
 For user registration and authentication, use the `appAuth` object in main.dart.

diff --git a/packages/masamune_annotation/README.md b/packages/masamune_annotation/README.md
@@ -923,12 +923,56 @@ Modal.confirm(
 );
 ```
 
+## Responsive layout
+
+It is possible to implement a responsive grid layout as follows.
+
+```dart
+ResponsiveBuilder(
+  builder: (context) => [
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          lg: 12,
+          child: Container(
+            color: Colors.red,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.green,
+            height: 100,
+          ),
+        ),
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.blue,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+  ],
+);
+```
+
 For other details, please see the package details page.
 
 katana_ui
 
 [https://pub.dev/packages/katana_ui](https://pub.dev/packages/katana_ui)
 
+katana_responsive
+
+[https://pub.dev/packages/katana_responsive](https://pub.dev/packages/katana_responsive)
+
 ## Authentication
 
 For user registration and authentication, use the `appAuth` object in main.dart.

diff --git a/packages/masamune_annotation/pubspec.lock b/packages/masamune_annotation/pubspec.lock
@@ -5,18 +5,18 @@ packages:
     dependency: transitive
     description:
       name: _fe_analyzer_shared
-      sha256: "569ddca58d535e601dd1584afa117710abc999d036c0cd2c51777fb257df78e8"
+      sha256: e440ac42679dfc04bbbefb58ed225c994bc7e07fccc8a68ec7d3631a127e5da9
       url: "https://pub.dev"
     source: hosted
-    version: "53.0.0"
+    version: "54.0.0"
   analyzer:
     dependency: transitive
     description:
       name: analyzer
-      sha256: "10927c4b7c7c88b1adbca278c3d5531db92e2f4b4abf04e2919a800af965f3f5"
+      sha256: "2c2e3721ee9fb36de92faa060f3480c81b23e904352b087e5c64224b1a044427"
       url: "https://pub.dev"
     source: hosted
-    version: "5.5.0"
+    version: "5.6.0"
   args:
     dependency: transitive
     description:
@@ -188,10 +188,9 @@ packages:
   katana:
     dependency: "direct main"
     description:
-      name: katana
-      sha256: "9a3ec047c35ec88e027139e88ce45202b022dd2111b38848c85159101b0028ce"
-      url: "https://pub.dev"
-    source: hosted
+      path: "../katana"
+      relative: true
+    source: path
     version: "1.0.5"
   lints:
     dependency: transitive
@@ -437,10 +436,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: a4040e9852e56bf8a3c5a2e08a56f6facd76e75500cf2a922ce5d52394c4998a
+      sha256: f24bfb5ea0b015205e583dda73d67de44785d583ad0889929deaff3a32359ff5
       url: "https://pub.dev"
     source: hosted
-    version: "11.0.1"
+    version: "11.1.0"
   watcher:
     dependency: transitive
     description:

diff --git a/packages/masamune_builder/README.md b/packages/masamune_builder/README.md
@@ -923,12 +923,56 @@ Modal.confirm(
 );
 ```
 
+## Responsive layout
+
+It is possible to implement a responsive grid layout as follows.
+
+```dart
+ResponsiveBuilder(
+  builder: (context) => [
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          lg: 12,
+          child: Container(
+            color: Colors.red,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+    ResponsiveRow(
+      children: [
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.green,
+            height: 100,
+          ),
+        ),
+        ResponsiveCol(
+          sm: 6,
+          child: Container(
+            color: Colors.blue,
+            height: 100,
+          ),
+        ),
+      ],
+    ),
+  ],
+);
+```
+
 For other details, please see the package details page.
 
 katana_ui
 
 [https://pub.dev/packages/katana_ui](https://pub.dev/packages/katana_ui)
 
+katana_responsive
+
+[https://pub.dev/packages/katana_responsive](https://pub.dev/packages/katana_responsive)
+
 ## Authentication
 
 For user registration and authentication, use the `appAuth` object in main.dart.