flutter 2일차 여러 widget

오늘은 어제 했던것에 이어서 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: true,
      home: MyHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hellow'),
      ),
      body: Text('hi'),
    );
  }
}

   

여기 body에 들어가는 여러 위젯에 대해서 공부해보겠습니다.

Container(
  width: 100,
  height: 100,
  child: Text("hello"),
),

가장 기본적이 딱히 별기능이 없습니다 웹에서 div태그 정도로 생각하시 면 됩니다

이런식으로  가로 세로 100짜리 박스가 만들어지고 그안에  child의 내용인 hello가 들어가있습니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('hi1'),
    Text('hi2'),
  ],
),

다음은 column입니다.  children요소들을 세로로 넣어주는 요소입니다. 그리고 mainAxisalignment는 주요 축 기준으로 어디로 정열할지 정하는 것입니다. 지금 column이 므로 세로축 기준을로 중심으로가 있도록 설정되어있습니다.

이런 식으로 세로로 두개가 드가있고 세로축 중간에 들어가있습니다.

 Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('hi1'),
    Text('hi2'),
  ],
),

Column이 세로 라면 Row는 이름에서 알수있듯이 가로 기준입니다. 그래서mainAxisalignment는 세로축이 아니라 가로축 기준으로 중간에 가있게 됩니다.

설명대로 동작된 모습입니다.

Stack(
  children: [
    Container(
      width: 150 ,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 140,
      height: 100,
      color: Colors.blueAccent,
    ),
    Container(
      width: 130,
      height: 100,
      color: Colors.yellow,
    ),
    Container(
      width: 120,
      height:100,
      color: Colors.orange,
    ),
  ],
)

이거 column인데 z축으로 쌓인다고 생각하시면 편합니다 즉 순서대로 젤밑에 깔리고 그 위에 그밑에 요소가 깔리게 됩니다. 즉 점점 작은걸 배치해야지 모든요소가 보이게 됩니다. 만약 마지막 요소가 가장크다면 아래 요소는 보이지 않게 됩니다.

코드 실행

코드대로 실행하면 이렇게 되고 

가장 아래요소의 width를 180으로 고치면 젤위에 있는 요소가 밑에있는 요소를 가려버립니다.

Center(
  child: Text('hi'),
),

이것은 요소를 중간으로 이동시키는 역할입니다.

hi 가 중간으로 갔습니다.

Padding(
  padding: EdgeInsets.all(20),
  child: Text('hi'),
),

Padding은 패딩을 넣기 위해 쓰는 것입니다. EdgeInsets는 가장자리에서 얼마나 뛰우냐는 뜻으로 해석할수 있습니다. 즉  EdgeInsets.all은 해당 가장자리 모두 20만큼뛰우겠다 라는 의미라고 생각하시면 됩니다.

all,only,symmetric 이 있는데 각각 한번에 전부설정  한개씩 설정  그리고 위아래 ,왼쪽 오른쪽  이렇게 두개씩 묶어서 설정하는 총 3가지가 있습니다.

Column(
  children: [
    Text('hi'),
    SizedBox(height: 100, width: 100,),
    Text('hi'),
  ],
),

SizedBox는 중간에 공간을 뛰워주는 역할입니다. 진짜 공간을 벌리기 위한 역할입니다. 

이렇게 세로 가로 100자리 요소가 들어가서 중간에 공간이 생겼습니다.

Column(
  children: [
    ElevatedButton(
        onPressed: () {},
        child: Text('elevated',style: TextStyle(color: Colors.black),),
        style: ElevatedButton.styleFrom(
            primary: Colors.yellow,
            textStyle:TextStyle(
              backgroundColor: Colors.blue,
              fontSize: 20.0,

            ),
        ),
    ),
    TextButton(onPressed: () {}, child: Text('TextButton')),
    OutlinedButton(onPressed: () {}, child: Text('OutlinedButton'))
  ],
),

이렇게 버튼 종류도 여러가지다 젤위에 꺼에만 style을 적용시켜봤다  primary는 버튼의 배경색 backgroundcolor는 글자가 차지하는 부분의 배경색 fontsize는 글자크기 Text부분에서 글자색깔을 설정해줄수 있다.

그리고 onpressed는 눌렀을때 실행할 함수이다.

child는 버튼안에 들어갈 내용이다.

오늘은 여기까지 해보도록 하겠습니다.