katana_responsive 1.3.5

A package that enables the implementation of responsive grid layouts based on Bootstrap.

Katana Responsive

---

[YouTube] | [Packages] | [Twitter] | [LinkedIn]

---

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/

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.

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.

ResponsiveVisibility(
  visible: (tier) => tier <= ResponsiveGridTier.xs,
  child: IconButton(
    color: Colors.white,
    icon: const Icon(Icons.add),
    onPressed: () {},
  ),
);