반응형
현재 Flutter에서 제공하는 기본적인 버튼은 총 3가지입니다.
1.ElevatedButton
2.OutlinedButton
3.TextButton
기본적인 틀은 아래와 같습니다.
여기서 styleform으로 원하는 모양의 버튼을 만들 수 있습니다.
그리고 Container도 버튼이 될 수 있습니다.
GestureDetector를 Container를 감싸주어서
ontap: 파라미터를 이용해서 버튼으로 만들 수 있습니다.
Flutter에서 제공하는 버튼이 마음에 안든다면 Container로 버튼을 만들어서 사용하는 것도 좋은 방법입니다!
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('버튼 예제'),),
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(onPressed: (){}, child: Text('ElveatedButton')),
OutlinedButton(onPressed: (){}, child: Text('OutlinedButton')),
TextButton(onPressed: (){}, child: Text('TextButton')),
GestureDetector(
onTap: (){},
child: Container(height: 50,
width: 100,child: Text('Container Button'),),
),
],
),
),
);
}
}
다음시간에는 이 버튼을 이용해서 페이지 이동을 진행해보겠습니다
반응형
'flutter' 카테고리의 다른 글
[flutter] Container Border bottom line (0) | 2023.01.20 |
---|---|
[flutter] google sign in 매번 팝업으로 계정 선택하기 (0) | 2023.01.19 |
[flutter] flutter에서 SQLite 사용하기 (0) | 2023.01.02 |
[dart] List.generate (0) | 2023.01.01 |
named router argument 주고 받기 (0) | 2023.01.01 |