搜尋套件、儲存庫與 APP 分類

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 是一個專為 Flutter 應用程式在網頁、桌面與 PWA 平台上限制內容大小而設計的套件。它透過約束佈局尺寸來幫助聚焦內容,讓缺乏響應式設計的應用程式在視覺上更一致且居中。非常適合建立固定寬度的佈局或模擬裝置螢幕,能在不需完整響應式的情況下提升呈現效果。此套件可輕鬆整合至現有專案,設定簡單。

適用情境

  • 模擬設備螢幕尺寸
  • 建立聚焦的內容版面
  • 提高網頁的視覺一致性
  • 啟用固定寬度設計預覽
  • 支援非回應式應用設計
  • 促進以內容為中心的使用者介面

主要特色

  • 內容大小限制
  • 固定寬度容器支援
  • 跨平台相容性
  • 輕鬆整合
  • 最小設定
  • 設備樣式的框架樣式

適合對象

  • 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
    );
  }
}

所屬分類

原始碼儲存庫

使用此套件的專案