2024.11.07 flutter 플러터 기본기 다지기 - 1

 

SingleChildScrollView 위젯

• 스크롤을 제공하기 위해 사용되는 위젯
• 수직/수평 스크롤을 지정하고자 할 경우, scrollDirection 속성값을 설정할 수 있음
  • scrollDirection: Axis.vertical (수직)
  • scrollDirection: Axis.horizontal (수평)

 

프로젝트 생성

프로젝트 이름 : class_v02

 

 

안드로이드 시뮬레이션  pixel 3 xl 선택

 

 

Flutter Inspector 

 

 

 

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Scrollable Example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                color: Colors.red,
                height: 1000,
                child: Text('Header'),
              ),

              Container(
                color: Colors.red,
                height: 1000,
                child: Text('Footer'),
              )

            ],
          ),
        ),
      ),
    );
  }
}

 

 

 

 

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Scrollable Example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.red,
                height: 1000,
                child: Text('Header'),
              ),

              Container(
                color: Colors.red,
                height: 1000,
                child: Text('Footer'),
              )

            ],
          ),
        ),
      ),
    );
  }
}