Flutter 화면 Icon 정렬

PC에서 사용하는 HTML과 겹치는 내용이 있지만, 모바일 앱을 만들기 위한 화면 관련 내용입니다. 화면에 글씨를 넣고 Icon을 넣고 정렬을 하고 하는 것이 쉬운 듯 어려운 부분은 분명히 있습니다. 하지만, 지금 하는 것들이 개발의 바탕이 되겠지만, 꾸준히 하다 보면 뭔가 보이겠죠?

 

Coding

하다 보니 점점 길어지기 시작하는군요. 여러 가지의 Button과 Icon을 넣어봤는데요. Flutter가 기존에 있는 것을 가져다가 쓰는 것이다 보니 쉬운 듯 어려운 것이 분명 있습니다. 하지만, Flutter기반 앱 개발을 많이 하고 있다니 반가운 이야기가 아닌가요? 예전부터 개발을 했다면 C부터 했을 텐데요. 요즘 개발 시장에서 많이 찾는 사람은 Java 하는 사람이라고는 하는데... 뭘 어찌해야 할지 몰라서 말이죠. 이럴 때 하나 진득하니 하는 것이 좋을듯하여 저는 Flutter로 해보겠습니다. Coding이 어려 보일듯하지만 찬찬히 하다 보면 눈에 조금씩 들어오는군요.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Appbar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyButtons(),
    );
  }
}

class MyButtons extends StatelessWidget {
  const MyButtons({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons'),
        centerTitle: true,
        ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: (){
                print('text button');
              },
                child: Text(
                  'Text Buttons',
                  style: TextStyle(
                  fontSize: 20.0
                  ),
                ),
                style: TextButton.styleFrom(
                primary: Colors.red,
              ),
            ),
            ElevatedButton(
                onPressed: (){
                  print('Elevated button');
                },
                child: Text('Elevated button'),
              style: ElevatedButton.styleFrom(
                primary: Colors.orangeAccent,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)
                ),
                elevation: 0.0
              ),
            ),
            OutlinedButton(
                onPressed: (){
                  print('OutLined button');
                },
                child: Text('OutLined button'),
                style: OutlinedButton.styleFrom(
                  primary: Colors.green,
                  side: BorderSide(
                    color: Colors.black87,
                    width: 2.0,
                  ),
                ),
                ),
            TextButton.icon(
                onPressed: (){
                  print('Icon button');
                },
                icon: Icon(
                    Icons.home,
                  size: 30.0,
                ),
                label: Text('Text Button'),
              style: TextButton.styleFrom(
                primary: Colors.red,
              ),
            ),
            ElevatedButton.icon(
                onPressed: (){
                  print('Go to home');
                },
                icon: Icon(
                  Icons.home,
                  size: 30.0,
                ),
                label: Text('Elevated Button'),
              style: ElevatedButton.styleFrom(
                primary: Colors.orangeAccent,
                minimumSize: Size(100, 100)
              ),
            ),
            OutlinedButton.icon(
                onPressed: null,
                icon: Icon(
                  Icons.holiday_village,
                  size: 30.0,
                ),
                label: Text('OutLine Button'),
              style: OutlinedButton.styleFrom(
                onSurface: Colors.pink
              ),
            ),
            ButtonBar(
              alignment: MainAxisAlignment.center,
              buttonPadding: EdgeInsets.all(20),
              children: [
                TextButton(
                    onPressed: (){},
                    child: Text("TextButton")
                ),
                ElevatedButton(
                    onPressed: (){},
                    child: Text("ElevatedButton")
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

결과물

Flutter 각종 Button

진정한 앱화면을 만들기 위해서는 얼마나 많은 고민이 필요한지 눈앞이 깜깜하군요. 그래도 웃어야죠. 어쩌겠어요.