1. 폴더구조
플러터개발시작시 유튜버들이 많이 사용하는 폴더구조
2. 스타일에 사용될 상수 만들기
디자인과 관련된 상수를 가진 색상 클래스, 엘리먼트 형태관련 클래스를 만들어서 디자인을 쉽게 하기
3. 데이터 모델 만들기
사용할 데이터의 형태를 지정하기 위해 데이터 모델만들기
4. 실제 사용하거나 UI디자인/테스트를 위한 데이터 만들기
개발중 데이터를 제공할 파일을 만듬
5. 여러개의 스크린을 불러올 수 있는 스크린콜랙션파일 생성 (Optional)
6. 여러개의 위젯을 불러올 수 있는 위젯콜렉션파일 생성
7. 웹을 위한 반응형 위젯 만들기
8. 데이터 오브젝트나 오브젝트 리스트를 json으로 바꾸기
9. 스트링으로 된 Json을 리스트로 바꾸기
10. GetX로 상태관리
GetX를 통해 state를 관리
11. GetX List 읽고 쓰고 수정하고 지우기
기타 미분류
플러터 위젯에 대해
1. 폴더구조
- assets/icons -svg
- assets/images -png
-lib/controllers
-lib/models - xxx_model.dart
-lib/screens - xxx_screen.dart
-lib/services
-lib/widgets
-lib/configs/palette.dart
2. 스타일에 사용될 상수 만들기
lib/configs/pallette.dart
공통으로 쓰일 칼러지정
class Palette {
static const Color PrimaryColor = Color(0xFF473F97);
}
materialApp / GetMaterialApp의 theme 속성을 사용할시
theme: ThemeData(
// 앱바의 배경색과 글자의 색과 형태를 설정
appBarTheme: Const AppBarTheme(backgroundColor: Palette.background, title: TextStyle( color: Colors.white, fontSize: 18,)),
// 배경색을 설정
sccaffoldBackgroundColor: Palette.background,
// The background color for major parts of the app (toolbars, tab bars, etc)
primaryColor: Colors.white,
//버튼 등 색상
accentColor: Palette.green,
iconTheme: const IconThemeData(color: colors.black),
fontFamily: GoogleFonts.montserrat().fontFamily,
textTheme: GoogleFonts.montserratTextTheme(),
),
home: 홈스크린으로 사용할 위젯
lib/configs/styles.dart
공통으로 쓰일 엘레멘트의 스타일 지정
class Styles {
statics const buttonTextStyle = TextStyle(
fontSize:16.0,
fontWeight: FontWeight.w600);
statics const ChartTextStyle = TextStyle(
color:Clors.grey,
fontSize:16.0,
fontWeight: FontWeight.w500);
statics const tapTextStyle = TextStyle(
fontSize:16.0,
fontWeight: FontWeight.w600);
}
or
lib/configs/consts.dart
const kTextColor = Color(0xFF535353);
const kTextLightColor = Color(0xFFACACAC);
const kDefaultPadding = 20.0;
3. 데이터 모델
lib/model/product.dart
class Product {
string a, b, c;
product ({this.a, this.b, this.c})
}
Json로 클래스를 만들어주는 사이트 - 여기서 쉽게 데이터 모델을 만들 수 있다.
javiercbk.github.io/json_to_dart/
4. 실제 사용하거나 UI디자인/테스트를 위한 데이터 만들기
lib/data/data.dart
List<Map> categories = [{"name":"music","icon": Icons.music_note,} {...},{...}];
List<Product> icecreamProducts = [
Product(a:'a',c:'ass',b:'ddd'),
Product(a:'a',c:'ass',b:'ddd'),
Product(...),
Product(...),
Product(...),
];
List<Product> chocolateProducts = [
Product(a:'a',c:'ass',b:'ddd'),
Product(a:'a',c:'ass',b:'ddd'),
Product(...)
];
5. 여러개의 스크린을 불러올 수 있는 스크린콜랙션파일 생성
lib/screens/screens.dart
스크린들을 불러오는데 사용
(Marcus Ng 유튜브 비디오 참조)
export 'bottom_nav_screen.dart';
export 'home_screen.dart';
export 'stats_screen.dart;
6. 여러개의 위젯을 불러올 수 있는 위젯콜렉션파일 생성
lib/widgets/widgets.dart
위젯 불러오는데 사용
(Marcus Ng 유튜브 비디오 참조)
7. 웹을 위한 반응형 위젯 만들기
lib/widgets/responsive.dart
import 'package:flutter/material.dart';
class Responsive extends StatelessWidget {
final Widget mobile;
final Widget tablet;
final Widget desktop;
Responsive({Key key, @requred this.mobile, this.tablet, @required this.desktop})
: super(key: key);
static bool isMobile(BuildContext context) =>
MediaQuery.of(context).size.width < 800;
static bool isTablet(BuildContext context) =>
MediaQuery.of(context).size.width >= 800 &&
MediaQuery.of(context).size.width < 1200;
static bool isDesktop(BuildContext context) =>
MediaQuery.of(context).size.width >= 1200;
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth >= 1200) {
return desktop;
} else if (constraints.maxWidth >=800) {
return tablet ?? mobile;
} else {
return mobile;
}
});
}
}
8. 데이터 오브젝트나 오브젝트 리스트를 json으로 바꾸기
List<Product> dataList =[
Product(name:'Product A', price:3700),
Pproduct(name:'Product B', price:3800),
]
String jsonDataList = jsonEncode(dataList);
bezkoder.com/dart-flutter-convert-object-to-json-string/
9. 스트링으로 된 Json을 리스트로 바꾸기
List dataList = jsonDecode(jsonDataList);
dataList.map((data) => Stock.fromJson(data)).toList();
stackoverflow.com/questions/51053954/how-to-deserialize-a-list-of-objects-from-json-in-flutter
10. GetX로 상태관리
// 데이터를 받아와야 할때
class MyStocksCtr extends GetxController {
List<dynamic> products = [].obs;
@override
void onInit() {
products.assignAll(datas); // 이렇게 말고 asyn 함수를 만들어야 함
super.onInit();
}
}
class MyStockScreen extends StatelessWidget {
final MyStocksCtr controller = Get.put(MyStocksCtr());
...
child: Obx(() {
return ListView.builder(
itemCount: controller.products.length,
itemBuilder: (context, index) {
final Stock stock = controller.products[index];
return CustomCard(stock: stock);
}
);
},
),
쓰기 controller.products.add(쓸객체)
지우기 controller.products.delete(지울엘리먼트)
인덱스로 지우기 controller.products.deleteAt(지울엘리멘트의 인덱스)
수정
위젯에서 리스트의 인덱스 받기
인덱스가 있으면 에디팅컨트롤러의 텍스트에 기존 내용을 넣기
controller.products[index].속성 = 에디팅컨트롤러의 수정된 내용
Get.back
Get.to(() => MyHomePage(title: '전달값')
- 플러터는 레고의 블럭을 껴서 만드는 방식과 비슷하게 만들어 진다. 그 블럭을 위젯이라고 하는데 그런 위젯을 직접만들거나 남들이 제공하는 위젯을 끼워넣는 방식으로 개발이 이루어진다. 이와 같은 플러터의 구성 때문에 위젯간의 데이터 전달(커뮤니케이션)이 개발에서 상당히 중요하다.
- 개발시 stateful위젯과 stateless 위젯을 상속하여 자신의 위젯을 만드는데 stateless는 변화되는 상태값을 가지고 있지 않지만 stateful 위젯은 변화되는 상태값을 가지고 있다.
stateless 위젯은 직접 위젯을 build 하는 메서드를 가지고 있으며 값은 생성자를 통해 전달받으며 변하지 않는다.
stateful 위젯은 생성자를 통해 값을 전달 받지만 state를 관리하기 위해 state위젯을 상속한 클래스를 불러서 그 클래스의 값을 state로 한다. 그리고 그 스테이트위젯을 상속한 클래스는 build메서드를 가지고 있다.
즉,
class Bird extends StatefulWidget {
const Bird({
Key? key,
this.color = const Color(0xFFFFE306),
this.child,
}) : super(key: key);
// 생성자를 통해 얻어올 값
final Color color;
final Widget? child;
// 스테이트를 가질 수 있는 객체를 실행
_BirdState createState() => _BirdState();
}
class _BirdState extends State<Bird> {
// 스테이트, 변할수 있는 값들
double _size = 1.0;
void grow() {
setState(() { _size += 0.1; });
}
@override
Widget build(BuildContext context) {
// 여기에 변수를 사용하면 주로 UI와 관련된 변수 사용
return Container(
color: widget.color,
transform: Matrix4.diagonal3Values(_size, _size, 1.0),
child: widget.child,
);
}
}
UI를 개발시 기능은 미구현된 형태로 먼저 개발하면 편함
