[Flutter] 연습하기 4 - Flutter Shopping Cart app
·
Flutter/App
디자인 시안  쇼핑카트 앱 만들기: 단계별 구현Flutter를 사용해 쇼핑카트 앱을 만드는 과정입니다. 이 앱에서는 기본적인 UI 설계와 기능 구현을 단계별로 진행합니다. 1. 기본 코드 설계앱의 구조는 기본적으로 StatefulWidget과 StatelessWidget을 이용하여 UI를 구성합니다. 기본 코드에서 MaterialApp을 설정하고, ShoppingCartPage라는 페이지를 메인으로 설정합니다.void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Mater..
[Flutter] 연습하기 4 - Flutter Login app
·
Flutter/App
▼ 좀 더 자세히 알고싶다면 아래의 GitHub를 참고하세요!! GitHub - flutter-coder/flutter-bookContribute to flutter-coder/flutter-book development by creating an account on GitHub.github.com프로젝트 소개Flutter를 사용하여 로그인 화면과 홈 화면을 구현합니다. StatelessWidget과 StatefulWidget의 사용법.TextFormField를 활용한 입력 폼 구성.Navigator를 사용한 화면 전환.Material Design을 활용한 UI 구성.주요 기능이메일 및 비밀번호 입력 폼.입력 데이터의 유효성 검사 및 저장.로그인 버튼 클릭 시 홈 화면으로 전환. 이미지 다운로드 해주세요..
Stack 위젯 테스트 코드
·
Flutter/Dart 언어
Stack 위젯은 Flutter에서 여러 자식 위젯을 겹치게 배치할 수 있게 해주는 컨테이너 위젯입니다 Stack 내의 모든 자식은 오버레이 구조로 배열되어, 리스트의 앞쪽에 있는 위젯이 아래쪽에 위치하게 됩니다. Stack 위젯은 주로 위젯들 간의 위치를 상대적으로 정의할 때 사용됩니다.  Stack 위젯과 alignment 속성의 사용 import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Materi..
[Flutter] Flutter Scroll Wiget
·
Flutter/App
ListView 사용법과 주요 property가장 일반적으로 사용되는 스크롤 위젯ListView는 주로 다음과 같은 방식으로 사용일반적인 ListView를 명시적으로 호출하고 children 전달하는 방법 (적은 데이터에 사용시 용이함)ListView.builder를 사용하여 동적으로 호출ListView.separated는 ListView.builder 기능에 구분선 사용 가능주요 propertyreverse: true이면 bottom에서부터 리스트 표시padding: 리스트 아이템 간격 (EdgeInsets로 적용)itemCount: 동적 리스트 아이템 개수 (ListView.builder/ListView.separated에서 사용 가능)itemBuilder: 각 동적 리스트 아이템 정의 (ListVi..
[Flutter] 연습하기 3 - flutter profile app
·
Flutter/App
플러터를 이용해서 간단한 profile App을 만들며 문법에 익숙해져보도록 하겠습니다.만들면서 배우는 플러터 앱 프로그래밍을 바탕으로 연습했습니다.코드를 짜기 전, 최상단 폴더에 assets 폴더를 만들고 이미지를 넣어줍니다.사용할 내부 이미지 다운로드 받아 주세요(다른 이미지 사용 해도 좋아요) yaml 파일 설정 # To add assets to your application, add an assets section, like this: assets: - assets/avatar.png  theme.dart 파일 만들어 보기 앱의 테마는 전체 디자인에서 중요한 부분을 차지합니다. Flutter에서는 ThemeData 클래스를 사용하여 앱의 테마를 설정할 수 있습니다. 이를 통해 색상, 글..
[Dart] dart 기본 문법 익히기 (3) - 익명함수, 람다표현식
·
Flutter/Dart 언어
익명함수// 익명 함수// 코드의 시작점void main() { // 1단계 - 이름이 없는 함수 (선언을 하더라도 외부에서 사용할 방법이 없다.) // 변수에 할당하지 않고 바로 익명 함수를 호출하는 것은 dart에서 불가능 하다. (int number) { return 100 + number; }; // 2 단계 - 함수를 변수에 담을 수 있다. // dart 함수에 타입은 Funtion 이다. Function() square = () { return 10 * 10; }; // 3 단계 var sub = (int number1, int number2) { return number1 - number2; }; // 4 단계 - dart 에서는 매개변수 데이터 타입도 ..
Flutter란?
·
Flutter/Dart 언어
Flutter는 구글에서 개발한 모바일 UI 프레임워크입니다. iOS와 Android뿐만 아니라 웹까지 하나의 코드로 모두 개발할 수 있는 강력한 도구죠.간단히 말해, 한 번의 코딩으로 여러 플랫폼에서 동작하는 앱을 만들 수 있다는 것입니다!플러터의 핵심 목표는 무엇일까요?Flutter는 각 플랫폼(iOS, Android)에서 자연스럽게 동작하는 고성능 앱을 만드는 것이 목표입니다. 예를 들어, iOS에서는 iOS답게, Android에서는 Android답게 작동합니다.플러터로 개발할 수 있는 것들은?Android 앱iOS 앱웹 앱데스크탑 앱UI란?UI는 User Interface의 줄임말입니다.쉽게 말해, 사용자가 앱을 보고, 만지고, 조작하는 모든 것입니다.예시휴대폰 화면에서 터치하는 동작리모콘에서 버..