[ROLL DICE APP] #2 Dart&Flutter basic

🐬2.1 그라데이션 추가

🐟Adding Gradient

그라데이션 기능을 추가하기 위해 body 아래로 코드를 추가해 주었다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          // 스타일링과 레이아웃 설정시 유용한 위젯
          decoration: const BoxDecoration(
            //컨테이너 다양한 장식을 추가해줌
            gradient: LinearGradient(
              //선형 그라데이션 생성
              colors: [//리스트를 사용하여 그라데이션 색상 설정
                Color.fromARGB(255, 91, 32, 195),
                Color.fromARGB(255, 134, 77, 231),
              ],
              begin: Alignment.topLeft, //그라데이션 시작지점
              end: Alignment.bottomRight, // 그라데이션 마치는 지점
            ),
          ),
          child: const Center(
            child: Text("hello World!"),
          ),
        ),
      ), //scaffold는 body argument임
    ),
  );
}

괄호 닫을 때마다 쉼표 추가하기!
Container

• 스타일링과 레이아웃 설정시 유용한 위젯

decoration : BoxDecoration

• 박스 컨테이너 다양한 장식을 추가해줌

gradient : LinearGradient

• 선형 그라데이션 생성
• 색 설정을 위해 colors 위젯에 colors값을 갖는 list를 넣어주어야 함.

colors 위젯

• 색상 설정
• 위 코드에서는 리스트가 필요함

🐟그라데이션을 수작으로 추가하기

참고 : ctrl + space 위젯을 제안하는 메뉴를 펼쳐준다.

gradient : LinearGradient 아래로 위젯을 추가하였다.

• begin: Alignment.topLeft : 왼쪽 위에서 그라데이션 시작
• end: Alignment.bottomRight : 아래 오른쪽으로 그라데이션 마치기

---

🐬2.2 텍스트 스타일링

색상과 폰트 사이즈 변경

 child: Text(
              "hello World!",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 28.0), // 텍스트 스타일을 활용해 텍스트 스타일을 바꾼다,
            ),

style: TextStyle로 color와 fontSize 값을 변경 해 주었다.

---

🐬2.3 커스텀 위젯

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: GradientContainer(), // 생성자 함수 호출, 모든 클래스에 자동 추가됨
      ), //scaffold는 body argument임
    ),
  );
}

//그라데이션이 적용된 컨테이너 위젯
class GradientContainer extends StatelessWidget {
  //생성자 함수 , 일반적으로 사용x
  const GradientContainer({super.key});
  //{} 중괄호를 통해 named arguments 값을 받아온다
  //super : 상속받은 부모 클래스로 전달한다

  //statelesswidget 상속
// StatelessWidget 상속 시 build라는 메서드를 사용해야함
  @override //메소스 재정의시 사용
  Widget build(context) {
    //매개변수 context : 위젯이 위젯 트리 어디에 위치하는지에 대한 정보 담음

    return Container(
      // 스타일링과 레이아웃 설정시 유용한 위젯
      decoration: const BoxDecoration(
        //컨테이너 다양한 장식을 추가해줌
        gradient: LinearGradient(
          //선형 그라데이션 생성
          colors: [
            //리스트를 사용하여 그라데이션 색상 설정
            Color.fromARGB(255, 79, 37, 146),
            Color.fromARGB(255, 117, 107, 132),
          ],
          begin: Alignment.topLeft, //그라데이션 시작지점
          end: Alignment.bottomRight,
        ),
      ),
      child: const Center(
        child: Text(
          "hello World!",
          style: TextStyle(
              color: Colors.white,
              fontSize: 28.0), // 텍스트 스타일을 활용해 텍스트 스타일을 바꾼다,
        ),
      ),
    );
  }
}

🐟커스텀 위젯 클래스

• 위젯 트리를 분리하여 다른 위젯과 결함해 사용자만의 위젯을 만들 수 있다.
• 재사용이 가능한 위젯을 사용할 수 있다.
• 다트의 클래스를 이용해야 한다

class GradientContainer extends StatelessWidget{
	@override //메소스 재정의시 사용
  	Widget build(context) {//매개변수 context : 위젯이 위젯 트리 어디에 위치하는지에 대한 정보 담음
    return ;}
    	
}

커스텀 할 클래스를 정의하고 statelesswidget을 상속 받았다.
statelesswidget는 메소드 build를 필요로 하고 build는parameter context를 갖는다.
return 값으로 내가 커스텀하려는 위젯트리를 넣는다.

🐟클래스 사용

커스텀클래스의 생성자 함수를 호출하여 사용할 수 있다.

GradientContainer();

🐟생성자

커스텀 클래스에 생성자 함수를 생성한다. 일반적으로 dart내에서 처리해주기 때문에 생성할 필요는 없다.

//생성자 함수 , 일반적으로 사용x
  const GradientContainer({super.key});
  //{} 중괄호를 통해 named arguments 값을 받아온다
  //super : 상속받은 부모 클래스로 전달한다

---

🐬코드를 별도의 파일로 나누기

🐟파일생성

lib 파일에 gradient_container.dart 파일을 생성 하고 GradientContainer 클래스 전체를 저장하였다.

사용하는 기능의 패기지를 import 해주었다.

gradient_container.dart 파일

import 'package:flutter/material.dart';
//해당 패키지의 기능을 사용하기 때문에 추가해준다.

class GradientContainer extends StatelessWidget {
  //생성자 함수 , 일반적으로 사용x
  const GradientContainer({super.key});
  //{} 중괄호를 통해 named arguments 값을 받아온다
  //super : 상속받은 부모 클래스로 전달한다

  //statelesswidget 상속
// StatelessWidget 상속 시 build라는 메서드를 사용해야함
  @override //메소스 재정의시 사용
  Widget build(context) {
    //매개변수 context : 위젯이 위젯 트리 어디에 위치하는지에 대한 정보 담음

    return Container(
      // 스타일링과 레이아웃 설정시 유용한 위젯
      decoration: const BoxDecoration(
        //컨테이너 다양한 장식을 추가해줌
        gradient: LinearGradient(
          //선형 그라데이션 생성
          colors: [
            //리스트를 사용하여 그라데이션 색상 설정
            Color.fromARGB(255, 79, 37, 146),
            Color.fromARGB(255, 117, 107, 132),
          ],
          begin: Alignment.topLeft, //그라데이션 시작지점
          end: Alignment.bottomRight,
        ),
      ),
      child: const Center(
        child: Text(
          "hello World!",
          style: TextStyle(
              color: Colors.white,
              fontSize: 28.0), // 텍스트 스타일을 활용해 텍스트 스타일을 바꾼다,
        ),
      ),
    );
  }
}

🐟파일 연결

main.dart에 연결할 파일을 import하여 파일을 연결하였다

import 'package:roll_dice_app/gradient_container.dart';

---