이 튜토리얼에서는 스크롤하는 동안 위젯이 해당 위치에 고정될 수 있도록 화면 상단과 하단에 있는 위젯을 수정하는 방법을 알아봅니다. 이러한 유형의 UI 디자인은 앱에서 고정 머리글이나 바닥글을 만들 때 필요합니다.
List<int> nums = [1,2,3,4,5,6,7,8,9,10];
Stack(
children: [
Positioned(
top: 80, //display after the height of top widtet
bottom: 100, //display untill the height of bottom widget
left:0, right:0,
//mention top, bottom, left, right, for full size widget
child: SingleChildScrollView( //content widget tree
child: Column(
children: nums.map((num){
return Container(
width: double.infinity, //width 100%;
height: 80,
padding: EdgeInsets.all(20),
color: num % 2 == 0?Colors.purple:Colors.orange,
child: Text("Box $num"),
);
}).toList(),
),
)
),
//set top/bottom widget after content,
//other wise it wil go below content
Positioned( //position at top
top: 0,
left:0, right:0, //set left right to 0 for 100% width
child: Container( //your top widget tree
height: 80,
color: Colors.blueAccent
)
),
Positioned( //position at bottom
bottom: 0,
left:0, right:0, //set left right to 0 for 100% width
child: Container( //your bototm widget tree
height: 100,
color: Colors.greenAccent
)
),
],
)
위치 위젯을 사용하면 앱 화면 상단과 하단에 스티커 위젯을 구현할 수 있습니다. "상단, 하단, 왼쪽, 오른쪽" 매개변수는 위젯의 위치를 지정하는 동안 고유한 용도로 사용됩니다. 자세한 내용은 아래 전체 예를 참조하세요.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<int> nums = [1,2,3,4,5,6,7,8,9,10];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Fix Widget At Top/Bottom"),
backgroundColor: Colors.redAccent
),
body: Stack(
children: [
Positioned(
top: 80, //display after the height of top widtet
bottom: 100, //display untill the height of bottom widget
left:0, right:0,
//mention top, bottom, left, right, for full size widget
child: SingleChildScrollView( //content widget tree
child: Column(
children: nums.map((num){
return Container(
width: double.infinity, //width 100%;
height: 80,
padding: EdgeInsets.all(20),
color: num % 2 == 0?Colors.purple:Colors.orange,
child: Text("Box $num"),
);
}).toList(),
),
)
),
//set top/bottom widget after content,
//other wise it wil go below content
Positioned( //position at top
top: 0,
left:0, right:0, //set left right to 0 for 100% width
child: Container( //your top widget tree
height: 80,
color: Colors.blueAccent
)
),
Positioned( //position at bottom
bottom: 0,
left:0, right:0, //set left right to 0 for 100% width
child: Container( //your bototm widget tree
height: 100,
color: Colors.greenAccent
)
),
],
)
);
}
}
이런 방식으로 Flutter의 앱 화면 상단이나 하단에 있는 위젯을 수정할 수 있습니다.