본문 바로가기

[Mobile]

 (86)
[Flutter] 위젯 별로 공통 함수로 분류하기 플러터는 소스가 너무 길어진다. 그래서 관리하기도 어렵고 소스를 이해하기도, 유지보수하기도, 그리고...가독성도 떨어진다. 그래서 유틸성으로 개발해서 관리해보자 class WidgetUtil{ Widget getListView(List persons){ return ListView.builder( shrinkWrap: true, itemCount: persons.length, itemBuilder: (BuildContext context,int index){ return Container( height: 50, child: Text(persons[index].id), ); }); } } Container( child: new WidgetUtil().getListView(persons), ) ,Contai..
[Flutter] 동적 리스트뷰 생성하기 리스트 뷰의 빌더로 사용한다. itemBuilder로 해야 대량의 데이터를 처리하기에 용이하다고 한다. Container( //Listview child: ListView.builder( shrinkWrap: true, itemCount: persons.length, itemBuilder: (BuildContext context,int index){ return Container( height: 100, child: Text(persons[index].id), ); }) ) 이런식으로 사용하면 아래와 같이 결과가 나타난다. 이런식으로 동적으로 리스트가 그려진다.
[Flutter] 정적 리스트뷰 앱에 거의 필요한 요소이다. 이전에 포스팅한 내용을 가지고, 해당 사람의 정보를 리스트뷰로 보여주자. Container( //Listview child: ListView( shrinkWrap: true, padding:const EdgeInsets.all(8), children: [ Container( height: 50, color: Colors.amber[600], child:const Center( child:Text('11111') ) ), Container( height: 50, color: Colors.amber[500], child:const Center( child:Text('22222') ) ), Container( height: 50, color: Colors.amber[400], ch..
[Flutter] 화면 이동간 데이터 전달 화면 이동하는 걸 전 포스팅에서 다뤘다. 그러면 이동간 데이터 전달은 어떻게 할까? 우선 해당 위젯에 대한 생성자에 파라미터를 추가해주고 넘기면 된다. 1. push , pop의 경우 값을 넘겨주기 단순 값. 전송부 Navigator.of(context).push( MaterialPageRoute( builder: (BuildContext context) => Scene2(), settings: RouteSettings(arguments: '전송한 데이터'), ), ); 단순 값 수신부 @override Widget build(BuildContext context) { final arguments = ModalRoute.of(context)!.settings.arguments; print(argument..
[Flutter] 플러터 화면 이동 GestureDetector로 컴포넌트를 감싼다. 해당 으로 컴포넌트 당 클릭이나 이벤트가 발생할때 동작하는지 보자. 해당으로 하게 되면, 컨테이너를 클릭하면 gd가 프린트 된다. GestureDetector( onTap: (){print('gd');}, child: Container( // autogroupnhff9QD (GhkWyreBLNBRcThyFanhFF) width: double.infinity, height: 60*fem, decoration: BoxDecoration ( color: Color(0xffca3c3c), ), child: Center( child: Text( 'Login', style: SafeGoogleFont ( 'Inter', fontSize: 12*ffem, fontWe..
[Flutter] assets에 추가하고 IOS 빌드에 추가 IOS 빌드에 추가하고, 해당 이미지를 외부에서 사용해야할때가 있다. 시작해보자 1. Images 폴더 생성후 이미지 넣기 2. pubspec.yaml의 assets부분 수정 3. pub get 4.그대로 사용 5. 빌드 결과 확인
[Flutter] 피그마로 레이아웃 잡고 소스뽑기 우선 그럴싸한 페이지가 필요하다. 내가 직접 레이아웃을 짜는건 시간 대비 진행이 느리다. 1. figma에서 레이아웃을 만들어보자 사실 샘플이라, 이렇게 간략하게 만들수 있다. 로그인 버튼을 누르면 다음 레이아웃으로 이동하고, 해당 이동된 레이아웃에서는 Button이 있어, 이를 클릭하면 다른 팝업이나 신규 경로로 이동하고, 아래 버튼을 누르면 돌아간다. 2번째 레이아웃 상단에는 이미지를 넣어서 체크를 할 예정이다(리사이징 같은 ) 뭐 무튼 이렇게 레이아웃 잡은 걸 기준으로 Next! 2.Funtion12 피그마의 레이아웃을 플러터 소스로 간편하게 구현해주는것이다. 실제로 이렇게 하면, 레이아웃을 잡는데 들이는 소스를 확 줄여준다. 내가 디자이너나 기획자 퍼블리셔를 할거면 이걸 직접 소스를 짜면 좋겠지만..
[Flutter] Widget 별 가독성 향상 별건아니고, 저번 포스팅에서 너무 계층이 많다보니, 가독성이 떨어져서 위젯별로 리턴하는 펑션을 분리하고, 해당 펑션으로 대체하여 계층소스에 추가하였다. 이렇게 하니, 좀더 명확하고 직관적이여서 보기 편했다. 추천! 개인적으로 State의 소스가 너무 길어지면... 뎊스에 대해서 헷갈린다. import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(LoginApp()); class LoginApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( debugShowChec..

티스토리툴바