본문 바로가기
백엔드개발자/FLUTTER, DART

[Flutter] 글자 스타일, 아이콘 스타일, 버튼스타일, 앱바 꾸미기

by 보혀니 2023. 1. 1.

글자 스타일

Text() 위젯

style: TextStyle()

 

 

 

아이콘 스타일

color, size 뿐

 

 

 

버튼

TextButton()

IconButton()

ElevateButton()

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(
              child: TextButton(
            child: Text('버튼임'),
            onPressed: () {},
          )),
          SizedBox(
              child: IconButton(
            icon: Icon(Icons.star),
            onPressed: () {},
          )),
          SizedBox(
              child: ElevatedButton(
            child: Text('버튼임'),
            onPressed: () {},
          )),
        ],
      ),
    ));
  }
}

 

버튼스타일

 

 

앱바

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
          leading: Icon(Icons.star),
          title: Text('ddd'),
          actions: [Icon(Icons.add), Icon(Icons.add_call)]),
      body: SizedBox(),
    ));
  }
}

 

 

leading 부분에는 뒤로가기 버튼, 메뉴버튼 등을 넣어서 활용하면 되겠고

actions 리스트는 필터, 메뉴버튼 등을 넣어서 활용 하면 되겠다.