백엔드개발자/FLUTTER, DART
[Flutter] 글자 스타일, 아이콘 스타일, 버튼스타일, 앱바 꾸미기
보혀니
2023. 1. 1. 22:47
글자 스타일
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 리스트는 필터, 메뉴버튼 등을 넣어서 활용 하면 되겠다.