flutter) OutlinedButton을 label과 text로 사용하기

 

 

기존에는 일반 OutlinedButton을 사용했는데

아이콘과 함께 들어있는 버튼을 사용해보자

 

 

기존 코드

import 'package:flutter/material.dart';

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

  @override
  Widget build(context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.asset(
          "assets/images/quiz-logo.png",
          height: 500,
        ),
        const SizedBox(
          height: 30,
        ),
        Text(
          'Learn Flutterthe fun way!',
          style: TextStyle(color: Colors.white, fontSize: 24),
        ),
        const SizedBox(
          height: 30,
        ),
        OutlinedButton(
          onPressed: () {},
          style: OutlinedButton.styleFrom(foregroundColor: Colors.white),
          child: Text('StartQuiz'),
        )
      ],
    );
  }
}

 

변경 코드

import 'package:flutter/material.dart';

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

  @override
  Widget build(context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.asset(
          "assets/images/quiz-logo.png",
          height: 500,
        ),
        const SizedBox(
          height: 30,
        ),
        Text(
          'Learn Flutterthe fun way!',
          style: TextStyle(color: Colors.white, fontSize: 24),
        ),
        const SizedBox(
          height: 30,
        ),
        OutlinedButton.icon( //요기 변경
          onPressed: () {},
          style: OutlinedButton.styleFrom(foregroundColor: Colors.white),
          icon: const Icon(Icons.yard), //요기 변경
          label: Text('StartQuiz'),   //요기 변경
        )
      ],
    );
  }
}