Flextras는 표준 Column 및 Row 위젯의 기능을 확장하여 더 유연하고 강력한 레이아웃 관리를 가능하게 하는 Flutter 패키지입니다. 정렬, 간격, 반응형 동작에 대한 향상된 제어를 제공하여 복잡하고 적응 가능한 UI를 만들기 쉽게 만듭니다. 내장된 Flex 위젯을 넘어서 보다 많은 사용자 지정이 필요한 개발자를 위해 설계되었으며, 기존의 Flutter 프로젝트에 원활하게 통합됩니다. 이 패키지는 모바일, 웹, 데스크톱을 포함한 모든 주요 플랫폼을 지원하며 장치 간 일관된 동작을 보장합니다.
사용 사례
반응형 레이아웃 만들기
동적 간격을 사용하여 복잡한 UI 구축
정렬 정밀도 향상
다양한 화면 크기에 대응하는 적응형 인터페이스 설계
반복적인 레이아웃 패턴 간소화
주요 기능
확장된 정렬 옵션
동적 간격 제어
반응형 레이아웃 도우미
크로스 플랫폼 일관성
기존 Flutter 코드와의 간편한 통합
적합한 대상
복잡한 레이아웃을 구축하는 Flutter 개발자
다양한 플랫폼 간 UI 일관성을 우선시하는 팀
위젯 배치에 대해 세밀한 제어가 필요한 프로젝트
고려 사항
Flutter 레이아웃 시스템에 익숙해야 합니다
간단한 레이아웃에 오버헤드를 추가할 수 있습니다
고급 레이아웃 요구 사항을 가진 프로젝트에 가장 적합
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
flextras
A collection of Columns and Rows with extra functionality:
PaddedColumn / PaddedRow - Wraps a column/row in padding
SeparatedColumn / SeparatedRow - Insert any widget between each child
ExpandedScrollingColumn / ExpandedScrollingRow - Allow a column to hold Expandable children, while still scrolling if it needs to.
🔨 Installation
dependencies:flextras:^0.0.1
⚙ Import
import'package:flextras/flextras.dart';
🕹️ Usage
PaddedContainer and PaddedRow
A simple combination of Padding and Column/Row, as is often needed. Very simple, but saves a few lines in your tree:
Often you want to place a divider between the elements of a Column or Row. Use the separatorBuilder method to do so easily:
returnSeparatedColumn(
// 10px gap between each element
separatorBuilder: () => SizedBox(height: 10),
children: [ ... ]
)
ExpandedScrollingColumn and ExpandedScrollingRow
Solves a common use case where you want to have some expanding content, that can also begin scrolling if it runs out of room.
Normally, if you do something like this it will throw a layout error:
SingleChildScrollView(
child: Column(
children: [
Expanded(child: ...) // This tries to expand to infinity :(
]
)
)
ExpandedScrollingColumn fixes this by using the content's natural height, or the height of the parent view, whichever is greater.
// This will expand vertically to fill the parent, but begin scrolling when it has toExpandedScrollingColumn(
children: [
Expanded(child: Container(height: 400)),
]
)
🐞 Bugs/Requests
If you encounter any problems please open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are welcome.