패키지, 저장소 및 앱 카테고리 검색

flutter_web_frame 표지
패키지 상세v1.0.0

flutter_web_frame

Flutter Web/Desktop/PWA에서 콘텐츠 크기 제한하기, 반응형을 지원하지 않는 앱을 콘텐츠 중심으로 만들기

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
3.5천
좋아요
73
Pub 점수
150

패키지 설치

flutter pub add flutter_web_frame

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Flutter Web Frame는 웹, 데스크톱 및 PWA 플랫폼에서 Flutter 애플리케이션의 콘텐츠 크기를 제한하도록 설계된 패키지입니다. 레이아웃 차원을 제약함으로써 콘텐츠에 집중하게 하고, 반응형 디자인이 없는 앱의 시각적 일관성과 중심성을 향상시킵니다. 고정 너비 레이아웃을 만들거나 기기 화면을 시뮬레이션하는 데 이상적이며, 완전한 반응형 구현 없이도 프레젠테이션을 개선합니다. 최소한의 설정으로 기존 프로젝트에 원활하게 통합할 수 있습니다.

사용 사례

  • 장치 화면 크기 시뮬레이션
  • 집중된 콘텐츠 레이아웃 만들기
  • 웹에서 시각적 일관성 향상
  • 고정 너비 디자인 미리보기 활성화
  • 반응형이 아닌 앱 디자인 지원
  • 콘텐츠 중심의 UI를 용이하게 하기

주요 기능

  • 콘텐츠 크기 제한
  • 고정 폭 컨테이너 지원
  • 크로스 플랫폼 호환성
  • 간편한 통합
  • 최소 구성
  • 기기 유사 프레임 스타일링

적합한 대상

  • 웹 및 데스크톱 앱 개발자
  • 디자이너가 레이아웃 테스트 중
  • 반응하지 않는 앱 제작자
  • 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
    );
  }
}

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트