Center

더보기 
import 'package:flutter/material.dart';


// 앱 시작 부분
void main() {
  runApp(MyApp());
}


// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
  // StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
  // (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
  // 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)

  // StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
  // 반환한다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("플러터 마스터"),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
        ),
      ),

    );

  }
}

 

Padding

  • 안쪽 여백을 설정
  • EdgeInsets 클래스를 사용하여 설정 
    (앞에 const를 붙여 컴파일 타임 상수로 설정할 경우 -> 다시 사용될 경우 메모리에 있는 값을 재사용하는 장점이 있다.)
  • EdgeInsets.all() -> 4방향 모두를 설정함
  • EdgeInsets.only() -> 상하좌우 중에서 원하는 방향에만 값을 지정한다. (지정하지 않을 경우 기본 값 0.0)
  • EdgeIsets.FromLTRB() -> 4 방향의 값을 각각 지정

 

Align

  • 자식위젯의 정렬 방향을 정함

import 'dart:math';

import 'package:flutter/material.dart';


// 앱 시작 부분
void main() {
  runApp(MyApp());
}


// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
  // StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
  // (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
  // 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)

  // StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
  // 반환한다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("플러터 마스터"),
      ),
      body: Align(
        alignment: Alignment.bottomRight,
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
        ),
      ),

    );

  }
}

 

Expanded

  • 자식 위젯의 크기를 -> 최대로 학장시켜 줌
  • 여러 위젯에 동시에 적용할 경우 ->  flex 프로퍼티에 정숫값을 지정하여 비율을 지정할 수 있음 (기본값은 1)

import 'dart:math';

import 'package:flutter/material.dart';


// 앱 시작 부분
void main() {
  runApp(MyApp());
}


// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
  // StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
  // (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
  // 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)

  // StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
  // 반환한다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("플러터 마스터"),
      ),


      // 여기서부터 수정!!!!!
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 3,
              child: Container(
                color: Colors.red,
              ),
          ),
          Expanded(
            flex: 2,
              child: Container(
                color: Colors.yellow,
              ),
          ),
          Expanded(
              flex: 1,
                child: Container(
                  color: Colors.blue,
                ),
          ),
        ],
      )

    );

  }
}

3:2:1 비율

 

 

SizedBox

  • 크기에 관련한 프로퍼티가 없는 위젯을 특정 크기로 만들고 싶을 때 사용

import 'dart:math';

import 'package:flutter/material.dart';


// 앱 시작 부분
void main() {
  runApp(MyApp());
}


// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
  // StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
  // (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
  // 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)

  // StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
  // 반환한다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("플러터 마스터"),
      ),
      
      // 여기서부터 수정!!!!!
      body: SizedBox(
        width: 100,
        height: 100,
        child: Container(
          color: Colors.red,
        ),
      ),

    );

  }
}

 

 

Card

  • 기본적으로 크기가 0이므로 -> 자식 위젯에 따라 크기가 결정된다.
  • elevation -> 그림자의 깊이 조절 가능
  • shape ->  카드 모양을 변경 
import 'dart:math';

import 'package:flutter/material.dart';


// 앱 시작 부분
void main() {
  runApp(MyApp());
}


// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
  // StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
  // (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
  // 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)

  // StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
  // 반환한다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

// 시작 클래스가 실제로 표시하는 클래스,
// ignore: must_be_immutable
class MyHomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("플러터 마스터"),
      ),

      // 여기서부터 수정!!!!!
      body: Center(
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.0),
          ),
          elevation: 7.0,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),
      ),

    );

  }
}

 

'Flutter > 기본' 카테고리의 다른 글

화면 표시용 위젯 (Text, Image, Icon, Progress, CircleAvatar)  (0) 2021.06.15
버튼 계열 위젯 (ElevatedButton, TextButton, IconButton, FloatingActionButton)  (0) 2021.06.15
기본 위젯 2 (ListView, ListTitle, GridView, PageView, AppBar, TabBar, Tab, TabBarView, BottomNavigationBar)  (0) 2021.06.15
기본 위젯1 ( Container, column, row, stack, SingleChildScrollView)  (0) 2021.06.15
StatefulWidget 실습  (0) 2021.06.14

+ Recent posts

티스토리툴바