Flutter의 상단과 하단에 있는 위젯을 수정하는 방법

이 튜토리얼에서는 스크롤하는 동안 위젯이 해당 위치에 고정될 수 있도록 화면 상단과 하단에 있는 위젯을 수정하는 방법을 알아봅니다. 이러한 유형의 UI 디자인은 앱에서 고정 머리글이나 바닥글을 만들 때 필요합니다.

Flutter에서 위젯을 상단과 하단에 배치하는 방법:

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의 앱 화면 상단이나 하단에 있는 위젯을 수정할 수 있습니다.