Logging......

리스트뷰 빌더 형태. 아이템 카운트에 반복횟수, 아이템 빌더에 c, i 변수 두개 넣고 만든다. 리스트 타일을 쓰면 리딩과 타이틀 파라미터 활용할 수 있다 return MaterialApp( home: Scaffold( appBar: AppBar(), bottomNavigationBar: BottomTab(), body: ListView.builder( itemCount: 3, itemBuilder: (c,i){ return ListTile( leading: Image.asset('profile.jpg'), title: Text('James') ); }, ), ), ); } } class BottomTab extends StatelessWidget { const BottomTab({Key? key}) :..

STUDY LOG/Flutter Basic 2024. 3. 7. 18:55

[커스텀 위젯] stless 친 후 탭키를 누른 후, 함수 이름과 기능을 넣는다. 재사용 많은 UI는 커스텀 위젯으로 만든다. 실시간 데이터 연동필요 요소가 포함된 경우에는 변수로 사용하면 성능 이슈가 있으므로 클래스를 만들어서 사용한다.) return MaterialApp( home: Scaffold( body: ShopItem(), ), ); } } class ShopItem extends StatelessWidget { const ShopItem({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return SizedBox( child: Text('hi'), ); } } [리스트뷰] 리스트뷰 안에 넣으면 스크롤..

STUDY LOG/Flutter Basic 2024. 3. 6. 19:17

Flexible을 사용하면 화면을 flex로 비율대로 나눠준다 body:Row( children: [ Flexible(child: Container(color:Colors.green), flex: 3,), Flexible(child: Container(color:Colors.yellow), flex: 7,), ], ), Expanded를 사용하면 1가진 플렉서블 박스랑 똑같다. 박스 하나만 꽉 채우고 싶다면 익스펜디드를 사용한다! 박스폭을 %로 주고 싶으면 플렉서블 박스 하나 넓게 채우려면 익스펜디드 body:Row( children: [ Container(width:200, color:Colors.yellow), Expanded(child: Container(color:Colors.green)), ],..

STUDY LOG/Flutter Basic 2024. 2. 29. 20:19

텍스트 꾸미기는 텍스트 스타일 파라미터 안에서 처리할 수 있다. 앱바에서 좌상단 아이콘은 리딩, 오른쪽 아이콘들은 액션즈 파라미터를 사용한다. return MaterialApp( home: Scaffold( appBar: AppBar( leading:Icon(Icons.dehaze), title: Text('APP'), actions: [Icon(Icons.favorite), Icon(Icons.access_alarms),Icon(Icons.account_tree_outlined)], ), body: Column( children: [ SizedBox( child: Text('hi', style: TextStyle( color: Color.fromRGBO(102,000,102, 0.9), fontSize..

STUDY LOG/Flutter Basic 2024. 2. 29. 20:19

- 스캐폴드를 사용하면 앱의 상/중/하단을 나눠서 사용할 수 있다 class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: Container(), bottomNavigationBar: BottomAppBar(child: Text('메뉴1'),), ) ); } } 바디 안에 여러개 요소를 배치하고 싶다면 컨테이너 말고, Row를 쓴다. Row 안에 children 요소를 배열로 [ ] 넣으면 됨. 가운데 정렬하려면 메인액시스얼라인먼..

STUDY LOG/Flutter Basic 2024. 2. 29. 20:18

플러터에서 기본 위젯을 구성하는 방법기록 에디터에서 stless라고 치고 탭키 누르면 자동완성 import 'package:flutter/cupertino.dart'; 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: Text('hi~'), ); } } 이미지 넣고 싶다면 - 프로젝트 내에 assets 폴더 만들고 이미지 파일 넣기 - pubs..

STUDY LOG/Flutter Basic 2024. 2. 29. 20:17