[Flutter] - 3일차 과제

절대경로

최상위 루트 폴더부터 해당파일까지 모든 경로를 경유하는 경로

상대경로

현재의 파일이 기준이 되어서 해당파일까지의 위치 작성하는 경로

mainAxisAlignment

Row와 Column의 속성이다.
메인 되는 축에서의 정렬를 해준다.
예를 들어 Row안에 mainAxisAlignment를 사용하면 가로에 대해서 정렬를 한다.
즉, main은 사용하는 위젯의 메인 축에 대한 정렬를 해준다.

crossAxisAlignment

마찬가지로 Row와 Column의 속성이다.
crossAxisAlignment도 축의 정렬을 시켜주는 속성인데 main과 달리 반대가 되는 축의 정렬를 시켜준다.
Row를 예시로 들면 가로축이 main 축이기 때문에 crossAxisAlignment는 반대이면서 수직이 되는 세로축에 대해서 정렬을 한다.

mainAxisSize

mainAxisSize는 말 그대로 사이즈에 대한 속성이다.
mainAxisSize는 main축에서 공간을 얼마나 차지하냐에 대한 속성이다.
예를 들어 Row에 대해서 mainAxisSize.max를 사용하면 그 widget은 가로로 최대한 늘어난다.
반대로 mainAxisSize.min을 사용하면 widget이 가지고 있는 컨텐츠나 자식 widget만큼만 크기를 가진다.

그라데이션 사용하기

1

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: 300,
            width: 300,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Colors.red,
                  Colors.blue,
                  Colors.purple,
                  Colors.pink,
                  Colors.amber,
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: 300,
            width: 300,
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(
                  200,
                ),
                bottomRight: Radius.circular(
                  200,
                ),
              ),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Colors.red,
                  Colors.blue,
                  Colors.purple,
                  Colors.pink,
                  Colors.amber,
                ],
              ),
            ),
            child: Center(
              child: Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(100),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                150,
              ),
              gradient: const LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Colors.red,
                  Colors.blue,
                  Colors.purple,
                  Colors.pink,
                  Colors.amber,
                ],
              ),
            ),
            child: Center(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(200),
                child: Image.network(
                    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhlzeLXT8zLLVMLpq9Ng7Or5JTE9FhhMIVXPaEpmMs&s"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                decoration: const BoxDecoration(color: Colors.blueGrey),
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 30,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        const CircleAvatar(
                          radius: 25,
                          backgroundColor: Colors.red,
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: const [
                            Text(
                              "라이언",
                              style: TextStyle(
                                fontSize: 20,
                              ),
                            ),
                            Text(
                              "게임개발",
                              style: TextStyle(
                                fontSize: 15,
                              ),
                            ),
                            Text(
                              "C#",
                              style: TextStyle(
                                fontSize: 15,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    const Center(
                      child: Icon(
                        Icons.add,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}