3일차 과제

김태원·2023년 3월 26일
0

Flutter

목록 보기
1/3

상대경로와 절대경로는 파일이나 디렉토리의 경로를 지정하는 방법입니다

상대경로는 현재 작업 중인 디렉토리를 기준으로 경로를 표시합니다
절대경로는 파일이나 디렉토리의 전체 경로를 표시합니다


Row위젯, Column위젯
mainAxisAlignment, crossAxisAlignment, mainAxisSize 속성:

mainAxisAlignment: 자식 위젯들을 주 축(main axis)을 기준으로 정렬하는 속성입니다.

  • MainAxisAlignment.start: 기본값으로, 주 축의 시작 부분에 자식 위젯들이 정렬됩니다.
    MainAxisAlignment.center: 주 축의 중앙 부분에 자식 위젯들이 정렬됩니다.
    MainAxisAlignment.end: 주 축의 끝 부분에 자식 위젯들이 정렬됩니다.
    MainAxisAlignment.spaceBetween: 자식 위젯들 사이에 동일한 간격이 유지되도록 정렬됩니다.
    MainAxisAlignment.spaceEvenly: 자식 위젯들 앞, 뒤, 사이에 동일한 간격이 유지되도록 정렬됩니다.
    MainAxisAlignment.spaceAround: 첫 번째 자식 위젯과 마지막 자식 위젯 사이에는 반 간격이 적용되고, 중간 자식 위젯들은 동일한 간격으로 정렬됩니다.

crossAxisAlignment: 주 축과 수직축(cross axis)을 기준으로 자식 위젯들을 정렬하는 속성입니다.

  • CrossAxisAlignment.start: 수직 축의 시작 부분에 자식 위젯들이 정렬됩니다.
    CrossAxisAlignment.center: 수직 축의 중앙 부분에 자식 위젯들이 정렬됩니다.
    CrossAxisAlignment.end: 수직 축의 끝 부분에 자식 위젯들이 정렬됩니다.
    CrossAxisAlignment.stretch: 수직 축의 크기를 늘리고, 자식 위젯들이 수직 축 전체에 맞게 확장됩니다.
    CrossAxisAlignment.baseline: 자식 위젯들의 텍스트 기준선에 맞춰 정렬됩니다.

mainAxisSize: 주 축의 길이를 얼마나 사용할 것인지를 결정하는 속성입니다.

  • MainAxisSize.max: 최대한의 길이를 사용하여 주 축의 전체 공간을 채우려고 시도합니다.
    MainAxisSize.min: 필요한 만큼만 주 축의 공간을 사용합니다.

  1. 아래의 이미지와 동일한 결과물을 만들고, 이를 만들기 위한 전체 코드를 작성하세요.
    (그라디언트 색은 5개 이상, 색상 자유)
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [                  
                  Colors.red,
                  Colors.orange,
                  Colors.yellow,
                  Colors.green,
                  Colors.blue,
                  Colors.purple,
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2.아래의 이미지와 동일한 결과물을 만들고, 이를 만들기 위한 전체 코드를 작성하세요.
(그라디언트 색상 2개 이상, 색상 자유)

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 250,
            width: 250,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(80),
                topRight: Radius.circular(0),
                bottomLeft: Radius.circular(0),
                bottomRight: Radius.circular(80),
              ),
              gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [
                  Colors.blue,
                  Colors.orange,
                ],
              ),
            ),
            child: Container(
              height: 10,
              width: 10,
              decoration: BoxDecoration(
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(100)),
            ),
          ),
        ),
      ),
    );
  }
}
profile
개발자 입니다

0개의 댓글