[Flutter] 나만의 기본기 (2)

 

 

1. 글자색

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임')),
        body: SizedBox(
          child: Text('안녕하세요',style: TextStyle(
            color: Colors.red
          ),),


        ),
      ),
    );
  }
}

→ 0xff가 필수 입력되어야함

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임')),
        body: SizedBox(
          child: Text('안녕하세요',style: TextStyle(
            color: Color(0xffaaaaaa)
          ),),


        ),
      ),
    );
  }
}

→ 범위
r : 0 ~ 255
g : 0 ~ 255
b : 0 ~ 255
opacity : 0 ~ 1.0

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임')),
        body: SizedBox(
          child: Text('안녕하세요',style: TextStyle(
            color: Color.fromRGBO(100,255,255,0)
          ),),


        ),
      ),
    );
  }
}

 

2. 글자 두께

→ fontWeight : FontWeight.w

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임')),
        body: SizedBox(
          child: Text('안녕하세요',style: TextStyle(
            fontWeight: FontWeight.w700
          ),
        ),
      ),
    )
    );
  }
}

 

3. 아이콘 꾸미기

→ 아이콘 색 넣기

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임'),),
        body: SizedBox(
          child: Icon(Icons.star, color: Colors.red,),
        ),
      ),
    );

  }
}

→ 아이콘 사이즈

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임'),),
        body: SizedBox(
          child: Icon(Icons.star, size: 100,),
        ),
      ),
    );

  }
}

 

4. 버튼

→ 버튼 넣기
TextButton() : child() → 버튼에 넣을 것, onPressed : (){} → 함수
IconButton() : Icon(Icons.star) ... 
ElevatedButton() : 색버튼 리클이팩트(버튼 클릭시 물결 쳐짐)

style : 버튼 꾸미기


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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임'),),
        body: SizedBox(
         child: TextButton(child: ,onPressed: (){},),
        ),
      ),
    );

  }
}

 

5. appBar

→ appBar : AppBar()
title : 왼쪽 제목
leading : 왼쪽에 넣을 아이콘
actions : 우측 아이콘 → 리스트형태로 여러개 넣기 가능

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(leading: Icon(Icons.star),),
        body: SizedBox(
        ),
      ),
    );

  }
}

 

6. 레이아웃 짜는 순서

 

① 예시디자인 준비

② 예시화면에 네모그리기

③ 방향은 바깥에서 안쪽으로 

④ 마무리 디자인