Container vs SizedBox

lass QuestionIdentifier extends StatelessWidget {
  const QuestionIdentifier({
    super.key,
    required this.questionIndex,
    required this.isCorrectAnswer,
  });

  final int questionIndex;
  final bool isCorrectAnswer;

  @override
  Widget build(context) {
    final questionNumer = questionIndex + 1;

    return Container(
      width: 30,
      height: 30,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: isCorrectAnswer
            ? const Color.fromARGB(255, 140, 203, 255)
            : const Color.fromARGB(255, 255, 150, 142),
        borderRadius: BorderRadius.circular(100),
      ),
      child: Text(
        questionNumer.toString(),
        style: const TextStyle(
          fontWeight: FontWeight.bold,
          color: Color.fromARGB(255, 0, 0, 0),
        ),
      ),
    );
  }
}

• SizedBox는 물론 padding 대신에 UI간 padding 값을 줄 때고 사용되긴 한다.

• 하지만 결국 둘다 어떠한 UI를 warpping한다는 점에서 동일하다.

• 이때 위 Container의 가장 큰 장점은 decoration이 가능하다는 것이다.

crossAxisAlignment

• 각각 Row, Columns widget에 대하여 확인할 수 있는데

import 'package:first_app/questions_summary/question_identifier.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class SummaryItem extends StatelessWidget {
  const SummaryItem(this.itemData, {super.key});
  final Map<String, Object> itemData;

  @override
  Widget build(context) {
    final isCorrectAnswer =
        itemData['user_anwer'] == itemData['correct_answer'];

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        QuestionIdentifier(
          questionIndex: itemData['question_index'] as int,
          isCorrectAnswer: isCorrectAnswer,
        ),
        const SizedBox(width: 20),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                itemData['question'] as String,
                style: GoogleFonts.bebasNeue(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold),
              ),
              Text(
                itemData['user_answer'] as String,
                style: const TextStyle(
                  color: Color.fromARGB(255, 241, 174, 253),
                ),
              ),
              Text(
                itemData['correct_answer'] as String,
                style: const TextStyle(
                  color: Color.fromARGB(255, 197, 255, 199),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

• Column을 기준으로 crossAxisAlignment .start를 하게되면 상하를 기준으로 최상단에, Row를 기준으로 하게된다면 최좌단에 위치하게된다.

FractionallySizedBox

• sizedBox와 다르게 height 값이 아닌 heightFator라는 속성값을 받는다.
  이 속성값은 고정값이 아닌 dynamic한 값을 받는다. 또한 해당 값은 0~1 사이의 값이어야한다. 즉, 대강 0% ~ 100% 라는 뜻이다.