나만의 개발블로그

한번 더 정리하고 싶은 내용만 따로 정리 // lib/main.dart void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (context) => MyAppState(), child: MaterialApp( title: 'Namer App', theme: ThemeData( useMaterial3: true, colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange), ), ho..

목적 Container() 위젯에 있는 여러 요소들의 TextStyle을 한번에 지정하고 싶음. Text() 위젯 하나하나에 지정하기 너무 귀찮으니깐... 코드 DefaultTextStyle() 위젯의 style을 사용해 한번에 적용하기 개꿀 물론 Theme 파일로 한번에 지정할 수 도 있을 듯? Container( margin: EdgeInsets.fromLTRB(10, 0, 0, 0), child: DefaultTextStyle( //

목적 Row() 위젯에 추가한 Icon 간의 간격을 간편하게 CSS의 word-spacing 처럼 요소 간의 간격을 쉽게 주고 싶었지만... 계속된 Container로 감싼 다음 margin 을 주는 노가다를 하게 되어 찾게 된 방법. 코드 SizedBox() 위젯을 추가하여 공간만 차지하게 만들어주기 Container( child: Row( children: [ Icon(Icons.search), SizedBox(width: 10), Icon(Icons.notification_add_outlined), SizedBox(width: 10), Icon(Icons.menu) ], ), )

발생 에러 A RenderPadding expected a child of type RenderBox but received a child of type RenderSliverGrid. SliverGrid는 Sliver 계열의 위젯이므로 SliverToBoxAdapter 안에 직접적으로 넣을 수 없기에 발생하는 에러인듯하다. 목적 CustomScrollView()위젯의 slivers 안에 SliverGrid() 위젯을 넣기 전 위젯을 감싸는 하나의 요소에 패딩을 넣어주기 코드 SliverPadding을 사용하여 패딩 속성을 주기 SliverPadding( padding: EdgeInsets.all(10), sliver: SliverGrid( gridDelegate: SliverGridDelegateWit..

목적 ElevatedButton 의 Radius를 변경하기 코드 ElevatedButton의 styleFrom을 활용해 shape속성으로 변경 Container( child: ElevatedButton( style: ElevatedButton.styleFrom( elevation: 0, backgroundColor: Colors.white, padding: EdgeInsets.fromLTRB(15, 20, 15, 20), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)) ), onPressed: (){}, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, childr..

목적 ElevatedButton이 여러개 담겨있는 공간을 가로로 스크롤 & 스와이프 하여 확인할 수 있도록 하기. 코드 ListView() 위젯을 활용 가로로 스크롤 하고 싶다면 scrollDirection: Axis.horizontal 세로로 스크롤 하고 싶다면 scrollDirection: Axis.vertical class SwipeRow extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 60, margin: EdgeInsets.fromLTRB(0, 10, 0, 10), child: ListView( scrollDirection: Axis.horizontal, childre..

목적 Flutter에서 기본적으로 제공하는 아이콘의 좌우를 반전시키는 것 코드 클래스를 활용하여 해당 클래스에 아이콘을 넣어주면 계속해서 적용할 수 있는 재사용성을 가짐. class FlippedIcon extends StatelessWidget { final IconData icon; FlippedIcon({required this.icon}); @override Widget build(BuildContext context) { return Transform( alignment: Alignment.center, transform: Matrix4.identity()..scale(-1.0, 1.0, 1.0), // X 축으로 반전 child: Icon(icon, color: Colors.grey.withO..

의도: BottomNavigationBar에 있는 아이콘 클릭 시, 클릭한 아이콘 및 라벨의 색상 변경 처음 코드(안되는 코드) class _MyAppState extends State { var clickState = 0; changeState(i) { setState(() { clickState = i; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.grey, titleTextStyle: TextStyle(color: Colors.black), elevation: 0, title: Text('홈'), actions: [ IconButton(onPress..

반응형으로 스크린 사이즈 대응하기 적용하고자 하는 곳의 Widget build() 함수 아래에 MediaQuery 클래스를 작성하기 단, context로는 Material App이 상위에 있어야 함. 그리고 .size 라고 하면 현재 유저 기기의 화면정보를 알려주게 된다. 종류(LP 단위) .width는 가로 .height는 세로 .padding.top은 상태바 윗 여백 .devicePixelRatio는 해상도 1LP에 몇 px가 들어가는지 .highContrast 고대비옵션이 켜져있는지 .textScaleFactor 폰트 사이즈를 얼마나 키우고 사용하는지 @override Widget build(BuildContext context) { MediaQuery.of(context).size.width; }..

Firestore 데이터 입출력시 규칙 정하는 법 데이터 추가 시 의도한 형식에 맞게 추가하고자 할 경우 if 조건문을 통해 제어하는 방법 ( 위변조가 가능하기에 근본적인 해결책이 아님) Firestore Console → Firestore Database → 규칙 우선 형식은 아래와 같다 경로: 어떤 게시물(Collection or Document)에 규칙을 정할 것인지 rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match 경로 { 조건 } } } ex) product 컬렉션에 조건을 주겠다고 하면 {docid} ⇒ product에 있는 모든 문서에 대한 조건을 주겠다는 의미 규칙 allow..