전체 글 (42) 썸네일형 리스트형 [Flutter] 간단하게 요소간 간격을 띄고 싶을때 (SizedBox) Row, Column에서 widget 사이에 빈 공간을 넣을때 sizedbox를 쓴다 아래와 같은 형태로 입력하면 됨. // Row, Column에서 widget 사이에 빈 공간을 넣을땐 아래와 같이 입력 SizedBox(width: 12), SizedBox(height: 12), // child 의 박스사이즈를 규정할때는 아래와 같이 사용 Center( child: SizedBox( height: 300, width: 200, child: Container( color: Colors.blue), ), )); [Flutter] Layout 사용 속성 및 정렬 (Row와 Column, Stack) 1. 레이아웃 사용 속성은 3가지 Row와 Column, Stack (적용은 앞서배운 리플렉터로 요소에 적용하면됨) Row : 가로로 배치 Column : 세로로 배치 (row,column 참고 url : https://ahang.tistory.com/8) Stack : 겹쳐서 배치 (stack 참고 url : https://ahang.tistory.com/24) 레이아웃에 대한 공식 사이트 안내문은 아래에서 확인 https://flutter-ko.dev/development/ui/layout Layouts in Flutter Learn how Flutter's layout mechanism works and how to build a layout. docs.flutter.dev 2. Row와 Colum.. [Flutter] 정해진 박스에 이미지 맞춰서 넣기(BoxFit.cover) 구현하려는 이미지 사이즈가 있으면 해당 틀에 이미지를 맞춰서 넣는 속성이 있음 fit: BoxFit.cover 위 속성 설정하면 이미지의 비율을 유지하면서 고정된 폭과 높이에 맞추어 이미지를 적절히 잘라서 보여줌 출처 : https://api.flutter.dev/flutter/painting/BoxFit.html [Flutter] 이미지나 사진 라운드 테두리 만들기 (ClipRRect) Flutter에서 사진 넣고 라운드 테두리 적용하는 방법 ClipRRect 라는 속성으로 적용함. 예시 ClipRRect( //이미지 굴림 설정하기 borderRadius: BorderRadius.circular(8), //굴림정도 설정 child: Image.network( '이미지url', width: 100, height: 100, fit: BoxFit.cover, ), ), [Flutter] 기본 서식(틀) 시작할때는 무조건 MaterialApp으로 시작해야 함. 그 안에 home에 띄워줄 위젯을 작성한 것 임 (지금은 homepage가 되겠지) import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), ); }.. [Flutter] ? 위젯사용시 key에 대한 글 아래 링크 참조 아직 분석(이해) 못했음 https://nsinc.tistory.com/214 [Flutter] Flutter Navigator 관련 사항 (또는 Named Route) 각 페이지 (플러터에선 라우트(Route)라고 부름)간 이동을 하기위해선 네비게이터를 사용함 아래 틀 참고 Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), // 이동하려는 페이지 ); Navigator.pop(context); // 종료 실제 활용하는 코드 참고 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 co.. [Flutter] Widget에 대한 내용 (StatelessWidget / StatefulWidget) Flutter의 모든 위젯은 StatelessWidget 과 StatefulWidget으로 나뉘어짐. StatelessWidget : 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯 StatefulWidget : 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯 'StatelessWidget' 사용 방법 : 유의사항, 안내페이지등 정적인 화면 개발 시 사용 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext .. 이전 1 2 3 4 5 6 다음
