본문 바로가기
반응형

Flutter/Widget108

플러터에서 Drawer 위젯 완전 정복 안녕하세요! 오늘은 Flutter에서 Drawer를 이용한 블로그글 작성 방법을 알려드리겠습니다.Drawer는 모바일 앱에서 좌우측에 메뉴를 나타내는 UI 위젯입니다. 블로그 앱에서 Drawer를 활용하면 사용자들이 쉽게 카테고리, 최신 글, 프로필 등을 이동할 수 있도록 도와줍니다.  1. Drawer 만들기먼저, main.dart 파일에서 Drawer를 만들어 봅시다.import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( titl.. 2024. 7. 16.
플러터에서 Scaffold 위젯 이해하기 Flutter에서 Scaffold 위젯 이해하기Flutter는 다양한 위젯들로 구성되어 있으며, 그 중 Scaffold는 화면을 구성하는데 중요한 역할을 합니다. Scaffold 위젯은 머티리얼 디자인 레이아웃 구조를 제공하여 앱의 기본적인 화면을 쉽게 구성할 수 있도록 도와줍니다. 이번 블로그에서는 Scaffold 위젯의 기본 사용법과 주요 속성들에 대해 알아보겠습니다.1. Scaffold 위젯이란?Scaffold는 Flutter 앱의 기본 레이아웃 구조를 제공하는 위젯으로, 앱 바(AppBar), 드로어(Drawer), 바텀 네비게이션 바(BottomNavigationBar) 등을 포함할 수 있습니다. Scaffold를 사용하면 머티리얼 디자인 가이드라인을 따르는 앱을 쉽게 만들 수 있습니다.2. S.. 2024. 7. 16.
[플러터 위젯] ElevatedButton 플러터(Flutter)는 다재다능한 위젯 라이브러리로, 다양한 버튼 옵션을 제공하여 모바일 애플리케이션의 UI를 쉽게 구축할 수 있습니다.그중에서 엘레베이티드버튼(ElevatedButton)은 자주 사용되는 버튼 중 하나입니다.이 글에서는 플러터에서 ElevatedButton을 사용하는 방법과 다양한 옵션을 소개하겠습니다.1. ElevatedButton 소개ElevatedButton은 플러터에서 사용자가 누를 수 있는 버튼을 만들기 위해 사용되는 위젯입니다. 이는 음영(shadow)과 높이(elevation)를 제공하여 버튼이 배경 위에 떠 있는 것처럼 보이게 합니다.2. ElevatedButton 기본 사용법다음은 ElevatedButton의 기본 사용법입니다:import 'package:flutter.. 2024. 7. 16.
플러터에서 아이콘 위젯 사용 방법 및 옵션 완벽 가이드 플러터에서 아이콘 위젯은 간단하지만 강력한 도구로, 사용자 인터페이스에 아이콘을 추가하고 기능을 연결하는 데 사용됩니다. 이 블로그 게시물에서는 Flutter에서 아이콘 위젯을 사용하는 방법과 다양한 옵션에 대해 자세히 살펴보겠습니다.1. 아이콘 위젯 소개Icon 위젯은 다양한 종류의 아이콘을 표시하는 데 사용됩니다. Material Design 아이콘, FontAwesome 아이콘, 커스텀 아이콘 등을 포함하여 다양한 아이콘 세트를 사용할 수 있습니다. 기본 사용법Icon( Icons.add, // 아이콘 종류 지정 (예: Icons.add, Icons.home) size: 24.0, // 아이콘 크기 설정 color: Colors.blue, // 아이콘 색상 설정) 옵션icon: 표시할 아이콘을.. 2024. 7. 13.
Flutter에서 RichText() 위젯 사용하기 Flutter에서 다양한 텍스트 스타일을 적용하고 싶으신가요? RichText 위젯이 여러분의 든든한 조력자가 될 것입니다! 이 가이드에서는 RichText 위젯을 사용하여 멋진 텍스트를 만드는 단계별 방법을 안내합니다. 1. RichText 위젯이란 무엇일까요?RichText 위젯은 Flutter에서 텍스트에 다양한 스타일을 적용하는 데 사용되는 강력한 도구입니다. 글꼴, 색상, 크기, 정렬 등을 자유롭게 조정하여 풍부하고 매력적인 텍스트를 표현할 수 있습니다. 2. RichText 위젯 사용 단계RichText 위젯을 사용하려면 다음과 같은 단계를 따르세요. 단계 1: TextSpan 클래스 사용하기RichText 위젯은 TextSpan 클래스를 사용하여 텍스트에 스타일을 적용합니다. TextSpan.. 2024. 7. 12.
Flutter에서 Text() 위젯 사용하기 Flutter에서 텍스트를 표시하기 위해 Text() 위젯을 사용합니다.이 위젯은 화면에 문자열을 표시하는 가장 기본적인 방법입니다. 기본 사용법import 'package:flutter/material.dart';class MyTextWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Text Widget Example'), ), body: Center( child: Text( 'Hello, Flutter!', style: TextStyle.. 2024. 7. 12.
반응형

티스토리툴바