[ Flutter ] Container & Column Widget

·2023년 11월 27일
0

Mobile-Software

목록 보기
12/15
post-thumbnail

Container Widget

Containers with children size themselved to thier children.

  • Container Widget 은 무조건 페이지 내에서 최대한의 공간을 차지하려고함
  • 컨테이너는 오직 하나의 child 만 가짐
  • 하위에 child 를 두고 Text 를 작성해보면, Container Widget 해당 Text 의 크기에 맞춰짐




  • SafeArea : 텍스트가 화면 밖을 나가는 것을 방지하기 위해 경계를 지정해주는 것
SafeArea 적용XSafeArea 적용O



  • margin : 컨테이너가 스크린에 가장자리에서 일정 간격을 가지게 하고 싶을 때 사용
  • padding : 그 컨테이너가 포함하고 있는 요소가 컨테이너에 가장자리에서 일정 간격을 가지게 하고 싶을 때 사용



import 'package:flutter/material.dart';

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

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Myapp',
      theme: ThemeData(primaryColor: Colors.blue),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});
  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(
        color: Colors.redAccent,
        child: Text('Hello'),
      ),
    );
  }
}
import 'package:flutter/material.dart';

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

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Myapp',
      theme: ThemeData(primaryColor: Colors.blue),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({super.key});
  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(
        child: Container(
          color: Colors.redAccent,
          width: 100,
          height: 100,
          margin: EdgeInsets.symmetric(
            vertical: 80,
            horizontal: 20,
          ),
          padding: EdgeInsets.all(20),
          child: Text('Hello'),
        ),
      ),
    );
  }
}



Conlumn Widget

  • mainAxisAlignment: MainAxisAlignment.center
    -> 컬럼을 화면 가운데 위치하도록 하는 속성
  • mainAxisSize: MainAxisSize.min
    -> 컬럼의 사이즈를 최소크기로 지정
  • verticalDirection: VerticalDirection.up
    -> 컬럼 안의 요소들 내림차순 정렬해 화면에 보여줌
class MyPage extends StatelessWidget {
  const MyPage({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            verticalDirection: VerticalDirection.up,
            children: <Widget>[
              Container(
                width: 100,
                height: 100,
                color: Colors.white,
                child: Text('Container 1'),
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Text('Container 2'),
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Text('Container 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
verticalDirection: VerticalDirection.downverticalDirection: VerticalDirection.up



mainAxisAlignment: MainAxisAlignment.spaceEvenlymainAxisAlignment: MainAxisAlignment.spaceBetween



  • crossAxisAlignment: CrossAxisAlignment.end
    -> 컬럼을 오른쪽 끝에 배치



Container(
                width: double.infinity,
              ),



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

  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                // width: 100,
                height: 100,
                color: Colors.white,
                child: Text('Container 1'),
              ),
              SizedBox(
                height: 30.0,
              ),
              Container(
                // width: 100,
                height: 100,
                color: Colors.red,
                child: Text('Container 2'),
              ),
              Container(
                // width: 100,
                height: 100,
                color: Colors.blue,
                child: Text('Container 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}



Row Widget

  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        child: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                // width: 100,
                height: 100,
                color: Colors.white,
                child: Text('Container 1'),
              ),
              SizedBox(
                height: 30.0,
              ),
              Container(
                // width: 100,
                height: 100,
                color: Colors.red,
                child: Text('Container 2'),
              ),
              Container(
                // width: 100,
                height: 100,
                color: Colors.blue,
                child: Text('Container 3'),
              ),
            ],
          ),
        ),





📚 코딩셰프 < 플러터(flutter) 순한맛 강좌 >


0개의 댓글