[2023.11.16] 플러터(flutter) 순한 맛 강좌 10 | 캐릭터 페이지 디자인#2

<< 소스 코드 >>

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: 'BBANTO',
      home: Grade(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true,  //AppBar에 타이틀을 중앙정렬 시킴
        elevation: 0.0,     //elevation을 사용하여 AppBar의 입체감을 없앰.
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          //crossAxisAlignment: NAME과 BBANTO 문자열의 시작점을 정렬하기 위해 사용
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('NAME',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
              ),
            ),
            SizedBox(   //NAME과 BBANTO 문자열 사이 간격을 위해 SizedBox 삽입
              height: 10.0,
            ),
            Text('BBANTO',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
                fontSize: 28.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

<< 출력 화면 >>