[4] Flutter 나만의 APP

준비하기

• 화면 디자인을 시작할 수 있는 테마 가져오기!
  테마 단축키 -> fm

• 화면을 구성하기 위해서는 기본적으로 Widget에 대한 내용을 가지고 있는
  클래스를 물려받아서 생성이 되어야 한다.

• 기본 Widget의 디자인이나 기능을 가지고 있는 클래스 -> stateful, stateless

  • 1. stateful : 화면이 연속적으로 수정되는 기능! -> 변화가 있는 화면
  • 2. stateless : 화면이 정적으로 멈춰있는 기능! -> 변화가 없는 화면

• 화면을 구성하기 위한 클래스 생성 단축키 -> stl 입력!

main

import 'package:flutter/material.dart';
import 'package:flutter01/ex01_appBar.dart';
import 'package:flutter01/ex02_body.dart';

void main() {
  // runApp() : 어플이 시작되었을때 처음 시작할 화면을 띄워주는 기능
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: ExBody(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

AppBar 만들기

import 'package:flutter/material.dart';
class ExAppBar extends StatelessWidget {
  const ExAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title : Text('나만의 Flutter App'),
        backgroundColor: Colors.blueAccent[100],
        // leading: Icon(Icons.menu),
        actions: [Icon(Icons.search),Icon(Icons.settings)],
        foregroundColor: Colors.white,
      ),
    );
  }
}

Body 만들기

import 'package:flutter/material.dart';

// 화면구성
class ExBody extends StatelessWidget {
  const ExBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Scaffold의 영역 -> appbar, body, bottom
      appBar: AppBar(backgroundColor: Colors.green),
      // Row() : 위젯들이 가로로 붙는 위젯!(왼쪽-오른쪽)
      // Column() : 위젯들이 세로로 붙는 위젯!(위-아래)
      body: Column(
        children: [
        Text('여기는 바디 영역입니다.',
          style: TextStyle(fontSize: 20),
        ),
        Text('두 번째 Text입니다.!'),
        Text('세 번째 Text입니다.')
      ],
      ),
    );
  }
}

image 부분 만들기

// 화면을 디자인 하기 위한 파일!
// 테마 가져오기 -> 화면 종류 지정하기 -> main.dart 수정 -> 화면 디자인
// 1. 화면 디자인을 위한 테마 가져오기!
import 'package:flutter/material.dart';

// 2. 화면 종류 지정하기
class ExImage extends StatelessWidget {
  const ExImage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          body: Center(child:
          Column(
              children: [
                Image.asset('images/GodFaker.jpg'),
                Text('신 상 혁')]),
        )));
  }
}

• pubspec.yaml

  assets:
     - images/GodFaker.jpg

버튼 만들기

// 테마 불러오기 -> 화면 생성(stl) -> 클래스 이름 : ExButton
// -> main.dart 연결수정 ==> 흰색화면 만들기(Scaffold)
import 'package:flutter/material.dart';

class ExButton extends StatelessWidget {
  const ExButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
      		// alt + 엔터로 한번에 빠르게 Center를 지정할 수 있다.
          child: Center(  
            child: Column(
              children: [
                IconButton(onPressed: (){
                  // 버튼이 눌리면 실행하게 될 로직을 작성하는 부분!
                  print('버튼이 눌렸습니다.!');
                }, icon: Icon(Icons.switch_access_shortcut)),
                TextButton(onPressed: (){}, child: Text("Text Button")),
                ElevatedButton(onPressed: (){}, child: Text('Elevated Button')),
                OutlinedButton(onPressed: (){}, child: Text('Outline Button'))
              ],
            ),
          )),
    );
  }
}

textField

import 'package:flutter/material.dart';

class ExTextfield extends StatelessWidget {
  const ExTextfield({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(50, 100, 50, 100),
            child: Center(
              child: Column(
                children: [
                  TextField(
                    decoration: InputDecoration(label: Icon(Icons.email_outlined),
                    hintText : 'Email을 입력해주세요!',
                      hintStyle: TextStyle(color:  Colors.grey)
                    ),
                  ),
                  TextField(
                    decoration: InputDecoration(label: Icon(Icons.password)),
                  ),
                  Center(
                    child: Row(
                      children: [
                        ElevatedButton(onPressed: (){}, child: Text('join')),
                        ElevatedButton(onPressed: (){}, child: Text('Login'))
                      ],
                    ),
                  )
                ],
              ),
            ),
        ),
      ),
    );
  }
}