본문 바로가기

Flutter

컨테이너 알아보기

// ignore_for_file: deprecated_member_use

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      //빨간띠 삭제
      debugShowCheckedModeBanner: false,
      title: 'TestApp',
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      // SafeArea : 개발자가 보여주기 위한 컨텐츠가 화면 밖으로 나가지 않게 경계를 정해주는것
      body: SafeArea(
        // Container : child 가 존재하지않으면 Container는 할수있는 모든 공간을 차지한다.
        //             Container child 위젯을 가지게되면 child위젯에 맞춰 크기를 조정한다.
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
          //margin: EdgeInsets.all(20),
          //EdgeInsets.symmetric : 컨테이너 위아래 간격과 좌우간격을 더욱 편하게 지정할때 사용
          margin: EdgeInsets.symmetric(
            //vertical : 세로축
            vertical: 50,
            // horizontal : 가로축
            horizontal: 10
          ),
          padding: EdgeInsets.all(40),
          child: Text('Test'),
        ),
      ),
    );
  }
}

'Flutter' 카테고리의 다른 글

카카오 로그인 연동  (0) 2022.05.19
Flutter EdgeInsets  (0) 2022.05.18
스낵바(Snack bar) 만들기  (0) 2022.05.18
간단한 화면 만들기(플러터 이미지 불러오기)  (0) 2022.05.18
키워드 정리  (0) 2022.05.16