플러터로 첫코딩하기! 22- Button의 종류들

 

현재 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'),),
            ),
          ],
        ),
      ),
    );
  }
}

l