Flutter_03. Excercise

1.  그 동안 배운 내용을 바탕으로 아래의 화면을 만들어보자.

 

2. 

 

import 'package:flutter/material.dart';
import 'components/start_screen.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromARGB(255, 78, 13, 151),
                Color.fromARGB(255, 107, 15, 168),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: const StartScreen(),
        ),
      ),
    ),
  );
}

 

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Center(
      // Center widget centers the content inside of it both horizontally and vertically.
      child: Column(
        mainAxisSize: MainAxisSize.min,
        // this will take minimal vertical space as needed.
        children: [
          Image.asset(
            'assets/images/quiz-logo.png',
            width: 300,
          ),
          const SizedBox(height: 80),
          // define exact size of th widget, not take available space.
          const Text(
            'Learn Flutter the Fun way',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
          const SizedBox(height: 30),
          OutlinedButton(
            onPressed: () => {},
            style: OutlinedButton.styleFrom(foregroundColor: Colors.white),
            child: const Text('Start Quiz'),
          )
        ],
      ),
    );
  }
}

 

   - OutlinedButton 스타일은 style: OutlinedButton.styleFrom(foregroundColor: Colors.white) 을 통해서 지정할 수 있다. 

   - SizedBox(height: n)을 통해 위젯간 간격 조정 가능

   - mainAxisSize: MainAxisSize.min ㅇㄹ

 

3. Start Quiz 버튼에 아이콘과 클릭시 반응 추가.

 

OutlinedButton.icon( // ways to add Icon
  onPressed: () => {},
  style: OutlinedButton.styleFrom(foregroundColor: Colors.white),
  icon: const Icon(Icons.arrow_right_alt), // can be use anywhere else
  label: const Text('Learn Now !'),
)