보이는 사진을 구역별로 나눠 코드를 보여주고 설명하도록 하겠다..
우선적으로 이번 예제에선 데이터에 변화가 없기에 Stateless Widget만 사용한다.
material을 import 시켜주고
기본적인 위젯 코드를 짜주자 외울필요없이 stl만 치면 나온다.
위 코드가 항상 시작할때 필요한 기본 코드이다.
맨위 appbar이다.
appbar를 보면 배경색이 있는데 보통강의를 보면 Colors.red 처럼 지정된 색을 사용하였지만 나는 hex코드를 이용했다.
hex코드는 Color(0xFF-------) 이렇게 사용하면 된다. 3번째줄의 색 코드는 앱 전체 배경색이고
appbar이 배경색 코드는 아랫쪽이다.
title는 센터로 한번 감싸주어 Text와 backgroundColor 두개 child를 갖고있다.
아래 elevation은 appbar와 body의 경계 음영이다. 숫자를 키워서 적용하면 이해가능할것이다.
body는 기본적으로 column으로 구성된다.
처음 위젯은 CircleAvatar이다.
해당 위젯또한 Center로 한번 감싸
x축의 센터로 맞춰준다.
백그라운드 이미지는 해당 프로젝트 루트에 저장했기에 AssetImage를 이용해 줬다.
인터넷 url을 통한 방법도 있지만 많을경우 앱이 무거워질수가있다.
radius는 원의 크기이다.
해당 위젯은 Divider로 만들었다.
height는 위아래 여백이며 위 30 아래 30의 공간을 둔다는 의미이다.
color은 hex코드를 이용하지않고 지정된 색을 사용하였다.
thickness는 선의 두깨를 의미한다. 숫자를 변경해보면 이해가능하다.
endIndent는 오른쪽 여백을 의미하며 해당 코드가 없으면 선이 오른쪽에 붙는걸 확인할 수 있을것이다.
4개의 텍스트 위젯을 사용했다.
letterSpacing - 문자간 간격을 의미한다.
fontsize - 글자 크기
fontWeight - 글자 굵기를 설정할 수 있다.
해당 위젯을보면 가로 2개씩 세로 3개로 구성되어있다.
Row 로 2개(아이콘,텍스트) 묶어 구성하면 된다.
Icon은 Icon(Icons. 을 찍으면 아이콘 종류가 많이 나온다. 원하는걸 쓰면 된다.
SizeBox는 Icon과 Text 사이 여백을 의미한다.
기본적으로 위젯을 디자인하는 방법은 정말 다양하다. 여백을 주는 방법 또한 여러가지이다.
얼추 기본 구성은 감이 잡혔지만 계속해서 예제를 통해 더 익혀야겠다.
아래는 풀 코드이다.
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 MaterialApp(
debugShowCheckedModeBanner: false,
title: 'BBANTO',
home: Grade(),
);
}
}
class Grade extends StatelessWidget {
const Grade({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF69abce),
appBar: AppBar(
title: Center(
child: Text(
'ID card',
style: TextStyle(
fontSize: 30.0,
),
),
),
backgroundColor: Color(0xff5D8FA9),
elevation: 0.0,
),
body: Padding(
padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: CircleAvatar(
backgroundImage: AssetImage('assets/2.png'),
radius: 80.0,
),
),
Divider(
height: 60.0,
color: Colors.grey[850],
thickness: 1.5,
endIndent: 30.0,
),
Text(
'NAME',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10.0,
),
Text(
'Coding Master',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
fontSize: 28.0,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 30.0,
),
Text(
'score',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10.0,
),
Text(
'3.5',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
fontSize: 28.0,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 30.0,
),
Row(
children: [
Icon(
Icons.check_circle_outline,
size: 25.0,
),
SizedBox(
width: 10.0,
),
Text(
'1111111111',
style: TextStyle(
fontSize: 25.0,
letterSpacing: 1.0,
fontWeight: FontWeight.bold,
),
),
],
),
Row(
children: [
Icon(
Icons.check_circle_outline,
size: 25.0,
),
SizedBox(
width: 10.0,
),
Text(
'2222222222',
style: TextStyle(
fontSize: 25.0,
letterSpacing: 1.0,
fontWeight: FontWeight.bold,
),
),
],
),
Row(
children: [
Icon(
Icons.check_circle_outline,
size: 25.0,
),
SizedBox(
width: 10.0,
),
Text(
'3333333333',
style: TextStyle(
fontSize: 25.0,
letterSpacing: 1.0,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
),
);
}
}