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

flutter_web_frame のカバー
パッケージ詳細v1.0.0

flutter_web_frame

Flutter Web/Desktop/PWAでコンテンツのサイズを制限し、レスポンシブに対応していないアプリをコンテンツに集中させます

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
3520
いいね数
73
Pub ポイント
150

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

flutter pub add flutter_web_frame

パッケージ概要

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

Flutter Web Frame は、Web、デスクトップ、および PWA プラットフォーム上の Flutter アプリケーションでコンテンツのサイズを制限することを目的としたパッケージです。レイアウトの寸法を制限することでコンテンツに焦点を当て、レスポンシブデザインが不足しているアプリケーションを視覚的に一貫性を持たせ、中央に配置します。固定幅のレイアウトを作成するか、デバイス画面をシミュレートする場合に最適であり、完全な応答性を必要とせずにプレゼンテーションを向上させます。最小限のセットアップで既存プロジェクトにスムーズに統合できます。

用途

  • デバイス画面サイズをシミュレートする
  • 焦点を当てたコンテンツレイアウトを作成する
  • Web上の視覚的一貫性を向上させる
  • 固定幅デザインプレビューを有効にする
  • 非応答型アプリデザインのサポート
  • コンテンツ中心のUIを容易にする

主な機能

  • コンテンツサイズの制限
  • 固定幅コンテナのサポート
  • クロスプラットフォーム互換性
  • 簡単な統合
  • 最小構成
  • デバイス風のフレームスタイル

適している対象

  • Webおよびデスクトップアプリ開発者
  • デザイナーがレイアウトをテストしています
  • 応答しないアプリ作成者
  • UIプロトタイピング
  • コンテンツ中心のアプリケーション
  • PWA開発者

注意事項

  • 完全に応答性のあるデザインには適していません
  • 複雑なレイアウトには手動調整が必要になる場合があります
  • ビジュアルフレーミングに限定され、レイアウト論理ではない
  • 静的または準静的コンテンツに最適
  • レスポンシブウィジェットを置き換えない
  • プラットフォーム固有のレンダリング動作は異なる場合があります

元の README

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

Flutter Web Frame

Pub

Make the frame max width / size when on large devices such as Web or Desktop.

This is very suitable to be used to limit the size of content, if your application is not yet available a responsive version if it is run on multiple devices / platforms.

Preview

Preview

Install

Follow the instructions to install it here

Example Usage

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_web_frame/flutter_web_frame.dart';

void main() {
  runApp(MyAp());
}

class MyAp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterWebFrame(
      builder: (context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Flutter Web Frame'),
            ),
            body: Center(
              child: Text('Body Text'),
            ),
          ),
        );
      },
      maximumSize: Size(475.0, 812.0), // Maximum size
      enabled: kIsWeb, // default is enable, when disable content is full size
      backgroundColor: Colors.grey, // Background color/white space
    );
  }
}

カテゴリー

ソースリポジトリ

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