eee-IT____에잇

플러터에서 화면 간 이동은 Stack 구조를 이용하고 있다.

화면에 보여주는 페이지는 Stack의 최상단에 있는 페이지가 되고, 현재 화면에서 다른 화면으로 이동할 때는,

Navigator.Push() 메소드를 사용하여 MaterialPageRoute 클래스에 이동하려고 하는 화면 클래스를 파라미터로 전달하여 Stack에 추가한다.

이전 화면 이동을 원하면 Navigator.Pop() 메소드를 사용

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondPage()),
  );
},

#############################

onPressed: () {
	Navigator.pop(context);
},

Routes

각각의 페이지를 분리하여 파일에 저장하고 경로를 설정한 다음 Routes를 이용하여 화면을 이동하는 방법을 알아보자.

main.dart에서 라우팅을 하기 위해선 화면 페이지와 라우트명을 매핑해야 한다.

이번 실습에선 main.dart에서 home_page.dart와 second_page.dart파일을 이용해서 이동을 할 것이다.

initialRoute : 초기화면지정

routes : 화면 페이지와 라우트명 매핑

return MaterialApp(
  title: 'navigation example',
  initialRoute: '/home',
  routes: {
    '/home' : (context) => MyHomePage(),
    '/second_page' : (context) => SecondPage(),
  },
  home: MyHomePage(),
);

TextField

TextField 위젯은 사용자로부터 텍스트를 입력받기 위해 사용하는 위젯으로, 가장 많이 사용하는 위젯.

TextField는 텍스트를 입력할 때마다 데이터가 수정되어 onChanged 이벤트가 발생된다.

이메일 형식의 텍스트 박스

TextField(
    keyboardType: TextInputType.emailAddress,
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Email',
      hintText: 'you@email.com',
      icon: Icon(Icons.mail_outline),
    ),
),

숫자만 입력 가능한 텍스트 박스

TextField(
    keyboardType: TextInputType.number,
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Number',
      hintText: '12345',
      icon: Icon(Icons.calculate_outlined),
    ),
    maxLength: 8, // 최대 입력 길이
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9]'))], // 정규식 : 숫자 0~9만 가능
),

비밀번호 입력 박스

비밀번호를 입력하기 위한 텍스트는 매우 중요해서 일반적으로 타인이 볼 수 없도록 '*' 로 표시되도록 설정을 한다.

TextField(
    keyboardType: TextInputType.visiblePassword,
    obscureText: true, // 입력 텍스트를 '*'로 표시해준다.
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Password',
      border: OutlineInputBorder(), //입력 칸에 테두리 설정
      icon: Icon(Icons.password),
    ),
    maxLength: 19, // 최대 입력 길이
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9]'))], // 정규식 : 숫자 0~9만 가능
),

flex : 각 컨테이너마다 확장되는 비율을 다르게 지정한다. flex에 정의된 비율에 따라 컨테이너가 늘어난다.

Expanded(
  flex: 1,
  child: Container(
    margin: EdgeInsets.only(),
    width: 80,
    height: 80,
    color: Colors.cyan[600],
  ),
),
Expanded(
  flex: 2,
  child: Container(
    width: 80,
    height: 80,
    color: Colors.orange[600],
  ),
),
Expanded(
  flex: 3,
  child: Container(
    width: 80,
    height: 80,
    color: Colors.red[600],
  ),
),

Stack : 위젯을 수평 또는 수직 방향으로 쌓아 배치하는 위젯, 하위 위젯들은 작성된 순서대로 가장 아래부터 쌓여 배치, 가장 먼저 수행되는 위젯이 가장 아래에 위치한다.

Expanded(
  flex: 1,
  child: Container(
    margin: EdgeInsets.only(),
    width: 500,
    height: 500,
    color: Colors.cyan[600],
  ),
),
Expanded(
  flex: 2,
  child: Container(
    width: 300,
    height: 300,
    color: Colors.orange[600],
  ),
),
Expanded(
  flex: 3,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red[600],
  ),
),

align : 하위 위젯의 위치를 지정한다.

Container(
  width: 600,
  height: 500,
  color: Colors.white,
    child: const Align(
      alignment: Alignment.topRight,
      child: FlutterLogo(
        size: 60,
      ),
  ),
)

SizedBox : 너비또는 높이를 가진 빈 상자 위젯

Container(
  width: 200,
  height: 200,
  color: Colors.blue[600]
),
SizedBox(height: 30.0,),
Container(
    width: 200,
    height: 200,
    color: Colors.red
),
SizedBox(height: 10.0,),
Container(
    width: 200,
    height: 200,
    color: Colors.green,
),

Column : 세로 방향으로 위젯들을 배치하는 위젯, children 속성을 가지며, 이 속성을 통해 하위 위젯들을 나열할 수 있다.

Row : Row 위젯은 가로 방향으로 배치하는 위젯

MainAxis 와 crossAxis : mainAxis는 Row 또는 Column을 정렬하는 주축을 의미하고 crossAxis는 주축과 반대 방향으로 위젯들을 맞춤정렬하는 축.

• center : 수평(수직)으로 가운데 정렬
• start : 수평(수직)으로 시작되는 왼쪽으로 정렬
• end : 수평(수직)으로 시작되는 오른쪽 끝부터 정렬
• spaceEvenly :수평(수직)으로 하위 위젯들 사이의 여백을 균등하게 배분하여 정렬
• spaceAround : 수평(수직)으로 하위 위젯 주변의 여백을 동일하게 정렬
• spaceBetween : 수평(수직)으로 양 끝에 하위 위젯을 배치하고 사이에 있는 하위 위젯의 여백을 균등하게 배분하여 정렬
• stretch : 수평(수직) 기준으로 하위 위젯을 늘력 확장.

1. center

mainAxisAlignment: MainAxisAlignment.center,

2. start

mainAxisAlignment: MainAxisAlignment.start,

3. end

mainAxisAlignment: MainAxisAlignment.end,

4. spaceEvenly

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

5. spaceAround

mainAxisAlignment: MainAxisAlignment.spaceAround,

6. spaceBetween

mainAxisAlignment: MainAxisAlignment.space.Between,

7. stretch

mainAxisAlignment: MainAxisAlignment.stretch,

Expanded : Row 또는 Column의 하위 위젯간에 남는 공간을 위젯을 늘려서 채울 수 있도록 하는 위젯.

즉 주축 방향으로 늘려서 비어있는 공간을 채운다.

SafeArea : 위젯들에 의해 그려지는 이미지? 들이 휴대폰의 안전한 공간에 그려지도록 자동적으로 padding을 추가하여 출력을 해준다.

body: Text(
  'SageArea가 없는 위젯사용'
),

body: SafeArea(
  child: Text('safeArea 위젯적용'),
	)
),

SafeArea 위젯을 사용하면 휴대폰 기기별로 예외 처리는 하지 않아도, 화면이 안전 영역에서 그려지도록 자동으로 padding을 추가하여 출력한다.

Image : Image 위젯은 서버에 있는 이미지를 사용하는 네트워크 이미지와 앱에 저장된 이미지를 사용하는 AssetImage가 있습니다.

1. 네트워크 이미지 : image.network

네트워크 이미지는 말 그대로 서버에 저장되어 있는 이미지를 보여주는 방식으로 앱 용량을 줄일 수 있는 방법이다.

home: Scaffold(
	body: Image.network('해당 경로')
),

2. 로컬 이미지: AssetImage

플러터에서 로컬 이미지를 앱에 보여주기 위해서는 assets폴더가 필요하고 assets폴더의 이미지를사용하기 위해서는 pubspec.yaml파일을 수정해야한다.

pubspec.yaml 파일 assets 경로설정

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - assets/img/

body: Image(
  image: AssetImage('assets/img/dog.jpg'),
  width: 300,
  height: 400,
  fit: BoxFit.fill,
),

Icon : 플러터에서는 머티리얼 아이콘관 쿠퍼티노 아이콘을 기본 아이콘으로 제공하고 있다.

appBar: AppBar(
  actions: [
    IconButton(
        onPressed: () {},
        icon: Icon(
          Icons.forest,
          size: 30,
          color: Colors.white
        ),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(
        Icons.forest,
      ),
    ),
  ],
  title: Text(
    'widget 연습',
    style: TextStyle(color: Colors.white),
  ),
  backgroundColor: Colors.blue,
),

Text 위젯은 플러터에서 가장 많이 사용하는 위젯으로 화면에 문자열을 보여주는 위젯

Style : Text 위젯에 스타일 적용

• letterspacing : 글자 간격 조정
• wordspacing : 단어 사이 간격 조정
• shadows : 그림자 효과
• decoration :텍스트 꾸미기
• TextDirection : 텍스트 정렬 방향
• Overflow : 텍스트 오버플로우 

decoration

child: const Text(
    'Flutter Text Widget',
    style: TextStyle(
      color: Colors.orange,
      fontWeight: FontWeight.bold,
      fontStyle: FontStyle.italic,
      fontSize: 30.0,
      letterSpacing: 10.0
    ),
),

shadow

style: TextStyle(
  color: Colors.orange,
  fontWeight: FontWeight.bold,
  fontStyle: FontStyle.italic,
  fontSize: 30.0,
  letterSpacing: 10.0,
  shadows: [
    Shadow(
      color: Colors.black54, // 그림자 색상
      offset: Offset(1,2),   // 그림자 오프셋
      blurRadius: 20,         // 그림자 크기(퍼지는 정도)
    )
  ]
),

decoration

.
.
.
생략

decoration: TextDecoration.underline,
decorationColor: Colors.blueGrey,
decorationStyle: TextDecorationStyle.double,

TextDirection

'Flutter Text Widget',
textDirection: TextDirection.rtl, // 왼쪽에서 오른쪽 정렬

maxLines: 1,
overflow: TextOverflow.ellipsis, // 한줄이 넘어가는 텍스트는 ...으로 표시

ellipsis : ... 표시
fade : 하단을 흐리게 표시
clip : 한줄에 보여질 수 있는 문자열만 출력

Text.rich(고급 텍스트 스타일) : 여러 텍스트로 나눠서 스타일을 각각 적용할 수 있다.

Text.rich(
  TextSpan(
    text: 'How ',
    style: Theme.of(context).textTheme.headline4,
    children: <TextSpan> [
      TextSpan(
        text: 'are ',
        style: TextStyle(
          fontSize: 35,
          fontStyle: FontStyle.italic, color: Colors.orange,
        ),
      ),
      TextSpan(
        text: 'you ',
        style: TextStyle(
          fontSize: 35,
          fontStyle: FontStyle.italic, color: Colors.red,
        ),
      ),
    ],
  ),
),

Container 위젯의 테두리, 박스 모양, 색상 등의 스타일을 적용하려면  decoration 속성의 BoxDecoration 클래스를 사용한다.

• border : 컨테이너의 테두리 스타일을 변경한다.
• borderRadius : 테두리의 모서리를 둥글게 변경한다.
• gradient : 컨테이너 내부 색상에 그라데이션 효과를 줄 수 있다.
• boxShadow : 그림자 효과를 줄 수 있고, 그림자 색상 위치 등 변경한다.

1)테두리 : border

body: Container(
  margin: EdgeInsets.all(30),
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.green,
      width: 10,
    ),
  ),
),

2) 둥근 모서리 : borderRadius

body: Container(
  margin: EdgeInsets.all(30),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(40),
    ),
    border: Border.all(
      color: Colors.green,
      width: 10,
      strokeAlign: BorderSide.strokeAlignInside,
    ),
  ),
),

3) 그라데이션 효과 : gradient

decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.purpleAccent, Colors.white],
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(40),
    ),
    border: Border.all(
      color: Colors.green,
      width: 2,
      strokeAlign: BorderSide.strokeAlignInside,
    ),
),

4) 그림자 효과 : boxShadow

boxShadow: [
  BoxShadow(
      color:Colors.grey,
      spreadRadius: 4.0,
    blurRadius: 10.0,
    blurStyle: BlurStyle.normal,
  ),
],