[018] 플러터 (Flutter) 배우기 - ElevatedButton, TextButton, OutlinedButton (버튼 만들기)

안녕하세요~ totally 개발자입니다.

 

ElevatedButton, TextButton, OutlinedButton

 

오늘은 버튼을 만들 수 있게 해주는 위젯들(ElevatedButton, TextButton, OutlinedButton)에 대해서 살펴보겠습니다. 먼저 ElevatedButton 위젯부터 살펴보겠습니다.

 

ElevatedButton

 

ElevatedButton 위젯

ElevatedButton 위젯의 기본 구조를 보면 아주 간단하게 style, onPressed, child 등을 가지며 style로 버튼을 디자인할 수 있고, onPressed 기능을 통해 버튼을 눌렀을 때의 액션을 구성할 수 있고, child 속성을 통해서 버튼 내부 위젯을 생성할 수 있습니다.

이번에는 TextButton도 추가해보겠습니다.

 

TextButton

 

TextButton 위젯

이번에는 TextButton 위젯을 추가해보았습니다. TextButton과 ElevatedButton의 차이는 제가 생각했을 때 쉽게 말해서 TextButton는 마치 HTML의 <a>태그처럼 Text를 버튼처럼 누를 수 있게 만드는 것이고 ElevatedButton는 일반적인 <button> 태그처럼 기본 배경색이 적용되는 버튼을 만들어준다고 생각하시면 됩니다. 마지막으로 OutlinedButton이 있습니다. 아래 화면으로 가보겠습니다.

 

OutlinedButton

 

OutlinedButton 위젯

위의 모습을 보시면 OutlinedButton에는 말 그대로 outline이 생긴 것을 확인해볼 수 있으며 58번째 shape를 통해 둥근 모서리를 적용할 수 있습니다. 쉽게 말해 TextButton에 Outline를 적용한 모습이라고 생각하시면 됩니다. 이렇게 3개의 버튼 위젯들을 알아보았는데 기존에 있었던 FlatButton, RaisedButton, OutlineButton는 deprecated 되어 더 이상 사용되지 않고 각각 TextButton, ElevatedButton, OutlinedButton으로 대체되어 사용되니 이 점 알고 사용하시면 되겠습니다. 감사합니다.'

 

[전체 소스 코드]

 

	import 'package:flutter/material.dart';
	class TestView extends StatefulWidget {
	@override
	State<TestView> createState() => _TestViewState();
	}
	class _TestViewState extends State<TestView> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("Test Title"),
	),
	drawer: Drawer(
	child: ListView(
	padding: EdgeInsets.zero,
	children: [
	const DrawerHeader(
	decoration: BoxDecoration(
	color: Colors.blue,
	),
	child: Text("Drawer Header Part"),
	),
	ListTile(
	title: Text("Menu 1"),
	),
	],
	),
	),
	body: Column(
	children: [
	Center(
	child: ElevatedButton(
	style: ElevatedButton.styleFrom(
	textStyle: TextStyle(
	fontSize: 20,
	),
	),
	onPressed: () {},
	child: Text("Elevated Button"),
	),
	),
	Center(
	child: TextButton(
	style: TextButton.styleFrom(
	backgroundColor: Colors.yellow,
	primary: Colors.black,
	),
	onPressed: () {},
	child: Text("Text Button"),
	),
	),
	Center(
	child: OutlinedButton(
	style: OutlinedButton.styleFrom(
	primary: Colors.black,
	shape: const RoundedRectangleBorder(
	borderRadius: BorderRadius.all(Radius.circular(10)),
	),
	),
	onPressed: () {},
	child: Text("Text Button"),
	),
	),
	],
	),
	);
	}
	}

view raw 018.dart hosted with ❤ by GitHub

[유튜브 강좌 영상]

 

https://youtu.be/KEmMaeKNVnU