Button 만들기

Flutter 버튼을 종류별로 일단 흔한 것들을 만들어보자.

 

일반적으로 사용하는게 Elevated Button 이다.

그외 여러개의 버튼이 제공되는데 많이 사용하는 버튼들은

• Elevated Button
• Outline Button
• Icon Button
• Text Button
• FloatingActionButton

등이 있다.

 

import 'package:flutter/material.dart';
import 'package:flutter_my_utils/utils/my_utils.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Buttons Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                utils.showSnackbar(context, "ElevatedButton pressed");
              },
              child: const Text('ElevatedButton'),
            ),
            const SizedBox(height: 10),
            OutlinedButton(
              onPressed: () {
                utils.showSnackbar(context, "OutlinedButton pressed");
              },
              child: const Text('OutlinedButton'),
            ),
            const SizedBox(height: 10),
            IconButton(
              onPressed: () {
                utils.showSnackbar(context, "IconButton pressed");
              },
              icon: const Icon(Icons.alarm),
              iconSize: 50,
            ),
            const SizedBox(height: 10),
            TextButton(
                onPressed: () {
                  utils.showSnackbar(context, "TextButton pressed");
                },
                child: const Text('TextButton')),
            const SizedBox(height: 10),
            FloatingActionButton(
              onPressed: () {
                utils.showSnackbar(context, "FloatingActionButton pressed");
              },
              // child: const Text("FloatingActionButton"),
              child: const Icon(Icons.navigation),
            ),
            const SizedBox(height: 10),
            FloatingActionButton.extended(
              label: const Text("Extended FloatingActionButton"),
              onPressed: () {
                utils.showSnackbar(context, "FloatingActionButton pressed");
              },
              // child: const Text("FloatingActionButton"),
              icon: const Icon(Icons.navigation),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

'패키지 가져오기

 

 

 

https://github.com/louiey-dev/flutter_my_utils/blob/main/lib/screen/buttons.dart

flutter_my_utils/lib/screen/buttons.dart at main · louiey-dev/flutter_my_utils