반응형 공부기록/Flutter9 [Flutter] ListView 재사용하기(재사용 가능한 Widget 만들기) Flutter에서 ListView 재사용하기 똑같은 형태의 Widget을 구현할 때는 Widget을 재사용 할 수 있다. bottomNavigatior로 탭하여 화면을 바꾸는 것은 아래 링크에서 확인해주세요. 2023.07.05 - [공부기록/Flutter] - [Flutter] AppBar, BottomNavigator 구현(상단,하단은 고정 & body만 바뀌도록) 이번 글에서는 Widget을 재사용하는 방법에 대해 알아보겠습니다. verticalList.dart `VerticalListWidget`은 StatefulWidget이다. 이 위젯은 수직 스크롤이 가능한 리스트를 생성하며, 각 아이템은 제목, 기간, 장소/날짜 정보, 그리고 이미지로 구성된다. `initState` 메서드에서는 `widge.. 2023. 7. 5. [Flutter] AppBar, BottomNavigator 구현(상단,하단은 고정 & body만 바뀌도록) Flutter에서 상단 바, 하단 네비게이션 구현하기 main.dart MainPage 위젯을 통해 구성된 애플리케이션이다. 애플리케이션의 전체적인 테마와 페이지 구성을 설정하고, 페이지 간 이동을 관리한다. MyApp: MaterialApp을 생성하여 애플리케이션 전체의 테마와 기본 설정을 지정. title은 애플리케이션의 제목을 설정하고, theme은 전체적인 테마 설정을 담고 있음. MainPage: StatefulWidget를 상속하여 페이지 이동과 BottomNavigationBar를 관리하는 위젯 _currentIndex 변수를 사용하여 현재 선택된 페이지 인덱스를 관리하며, _onItemTapped 함수는 탭 이벤트를 처리하여 _currentIndex를 업데이트 _pages 리스트에는 홈페이.. 2023. 7. 5. [Flutter] 반응형 모바일 배너 만들기(슬라이더) Flutter로 반응형 모바일 배너 만들기(슬라이드 형식) main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Mobile App', theme: ThemeData( primarySwatch: Colors.blue, appBarTheme: AppBarTheme( backgroundColor: Colors.white, // 기본 색상 )), home: MyHomePage(), ); } } class MyHo.. 2023. 7. 4. Flutter 유용한 Extensions(확장팩) 추천(Flutter Widget Snippets, Flutter Tree) Flutter Widget Snippets 1. Visual Studio Code 열기: - Flutter 프로젝트를 개발 중인 Visual Studio Code를 엽니다. 2. Snippet 확장 설치: - Visual Studio Code의 왼쪽 사이드바에서 Extensions(확장) 아이콘을 클릭합니다. - 검색 상자에 "Flutter Widget Snippets"를 입력하여 해당 확장을 찾습니다. - "Flutter Widget Snippets" 확장을 선택하고 "Install" 버튼을 클릭하여 설치합니다. 3. Snippets 사용: - Flutter Widget Snippets가 설치되었으면, Flutter 코드 작성 중에 위젯을 빠르게 생성할 수 있습니다. - Dart 파일에서 위젯을 생성하.. 2023. 7. 2. 이전 1 2 3 다음 728x90 반응형
