パッケージ、リポジトリ、アプリカテゴリを検索

ducafecatFlutter エコシステムナビ
responsive のカバー
パッケージ詳細v0.3.11+11

responsive

モバイル、デスクトップ、Web向けのFlutterアプリケーションでレスポンシブUIを簡単に構築できる方法を提供し、各画面サイズおよびデバイスの向きに応じてウィジェットのサイズを変更できるようにします。

AndroidiOSWebmacOSWindowsLinux
pub.dev API ドキュメント ソースコード
30日間ダウンロード
75
いいね数
66
Pub ポイント
140

パッケージをインストール

flutter pub add responsive

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

レスポンシブパッケージは、モバイル、デスクトップ、ウェブプラットフォーム間でFlutterアプリケーションの適応型ユーザーインターフェースを作成することを簡素化します。画面サイズやデバイスの向きに基づいて、異なるウィジェットのサイズやレイアウトを定義できるようにし、一貫性があり最適なUI体験を実現します。直感的なAPIにより、複雑な条件分岐や手動でのメディアクエリ処理なしに、レスポンシブデザインを容易に実現できます。さまざまな画面サイズを持つ複数のフォームファクターをターゲットとするアプリケーションにおいて特に有用です。

用途

  • クロスプラットフォームアプリ開発
  • モバイルおよびデスクトップ用の適応型レイアウト
  • 画面の向きに基づく動的UIサイズ調整
  • スケーラブルなWebインターフェースの構築
  • タブレットおよび大画面向けのレスポンシブデザイン

主な機能

  • 自動スクリーンサイズ検出
  • 方向に応じたウィジェットサイズの調整
  • 応答性ウィジェット用のシンプルな API
  • すべての主要なFlutterプラットフォームをサポート
  • 一般的なデバイス用の組み込みブレークポイント

適している対象

  • マルチプラットフォームのFlutterアプリを開発する開発者
  • デバイス間でUIの一貫性を重視するチーム
  • 動的レイアウト調整を必要とするプロジェクト

注意事項

  • 複数のデバイスタイプでのテストが必要になる場合があります
  • 過剰にネストされたレスポンシブウィジェットによるパフォーマンスへの影響
  • 事前定義されたブレークポイントを超えるカスタマイズは限られている

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

responsive

build status Pub support

Provide a easy way to make responsive UI for Flutter Applications in mobile, desktop and web, allow different widget size for each screen size and device orientation..

Made by Marvin Quevedo and [Víctor Guardiola](mailto:victor.guardiola@gmail.com) of FlutterEs Community.

Este paquete ha sido creado por la comunidad de Flutter en Español, si deseas ser parte de nosotros, puedes visitar cualquiera de estos links:

Facebook

Slack

Twitter

www.flutter-es.io

Telegram

portrait view

landscape view

Video example

Add dependency
dependencies:
  responsive: 0.2.3

Usage

You have two ways of use it:

You can use the ReponsiveRow widget and the FlexResponsive widget to make the layout

or

you can use the static method Responsive.calcColumns to assign the correct number of columns to a widget like a GridView.

Easy to use

import 'package:flutter/material.dart';
import 'package:responsive/flex_widget.dart';
import 'package:responsive/responsive_row.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: <Widget>[
            ResponsiveRow(
              columnsCount: 12,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: <Widget>[
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 4,
                  xsOffset: 2,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  xsLandOffset: 0,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.red,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.indigo,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.lime,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.teal,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.green,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.deepOrange,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.amber,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.grey,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.black,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.brown,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
                FlexWidget(
                  child: Container(
                    height: 100,
                    color: Colors.cyan,
                  ),
                  xs: 6,
                  sm: 3,
                  md: 2,
                  lg: 1,
                  xsLand: 4,
                  smLand: 2,
                  mdLand: 1,
                  lgLand: 1,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

カテゴリー

応答性のあるUI

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。