읏차, 잇(IT)차

1. ElevatedButton 2. OutlinedButton 3. TextButton import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('버튼'), ), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 10.0), child: Column( crossAxisAlignment: CrossAxisA..

코드 정리 하는 법 행(Row)별로 할당 된 구역을 나누어서 Column 내 children에 예를 들어 세 구역이라면 _Header() _Body() _Footer()로 나누고 1. 각 부분의 세부 코드는 하단으로 뺀다. 2. return 아래로 복붙 해준다. 3. 필요시 인스턴스 추가해준다.(외부에서 받아와야 하는 경우 아래에서는 _Body, _Footer) Widget build(BuildContext context) { return Scaffold( backgroundColor: PRIMARY_COLOR, body: SafeArea( child: Padding( padding: EdgeInsets.symmetric( horizontal: 16.0, ), child: Column( crossAxis..

Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Row( children: 123 .toString() .split('') .map( (x) => Image.asset( 'asset/img/$x.png', height: 70.0, width: 50.0, ), ) .toList()), Row( children: 456 .toString() .split('') .map( (x) => Image.asset( 'asset/img/$x.png', height: 70.0, width: 50.0, ), ) .toList()), Row( children: 789 .toString() .split('') .map( (x) ..

DateTime 날짜에 관한 것을 입맛대로 반환할 수 있는 Widget이다. 예제로 하나씩 출력을 받아봅시다 DateTime DateTime now = DateTime.now(); print(now.year); DateTime.now();를 출력하면 2023이 출력된다. Duration Duration duration = Duration(seconds: 60); print(duration); print(duration.inDays); print(duration.inMinutes); Duration은 특정 날짜, 시간을 기간(duration)으로 받을 수 있다. duration에는 in으로 시작하는 인자들이 있는데 반환받고 싶은 인자의 형태로 duration을 받을 수 있다. 즉 위에 코드는 60초를 일(..

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pink[100], body: SafeArea( bottom: false, chi..

1. asset파일을 프로젝트에 추가해 준다 2. pubspec.yaml파일에서 flutter: uses-material-design: true를 찾은 후에 프로젝트에 추가한 경로를 적어주면 된다. (fonts는 family인 것) assets: - asset/img/ fonts: - family: parisienne fonts: - asset: asset/font/Parisienne-Regular.ttf - family: sunflower fonts: - asset: asset/font/Sunflower-Light.ttf // 기본은 400 - asset: asset/font/Sunflower-Medium.ttf weight: 500 - asset: asset/font/Sunflower-Bold.ttf..

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); 이 코드를 Build에 작성해주면 된다. @override Widget build(BuildContext context) { // hotreload는 build만 새로고침이니까, SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); return Scaffold( body: PageView( ), ); } }

MainAxisAlignment와 CrossAxisAlignment MainAxisSize Expanded, Flexible에 대해 알아보즈아 그냥 이해를 위한 것은 눈으로 보면 되고 따라하면서 이해하실 분들은 아래 코드를 기본베이스로 해보시면 될 것이다. 사전세팅 일단 main.dart에 import 'package:axispractice/screen/home_screen.dart'; import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: HomeScreen( ), ), ); } 그리고 다른 dart파일에 아래 코드를 입력하고 import 해옵니다. import 'package:flutter/material.dar..

plugin stless 을 사용해보자 Widget void main() { runApp( MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( backgroundColor: Color(0xFFF99231), body: Column( mainAxisAlignment: MainAxisAlignment.center, // 기본이 세로상단임 children: [ Image.asset( 'asset/img/logo.png', ), CircularProgressIndicator( color: Colors.white, ), ], ), ); ), ); } class HomeScreen extends StatelessWidget { @override Widg..

Flutter에서 asset폴더를 추가하는 방법은 아래와 같다 1. asset이 들어있는 폴더(나의 경우 asset폴더)를 복사한다. 2. 프로젝트를 클릭해서 붙여넣기 한다. 3. pubspec.yaml 야멜파일로 간다. 4. flutter을 찾는다. 5. uses-material-design하단에 탭으로 칸을띄우고 assets:를 추가한다. 6. 엔터를 치면 알아서 들여쓰기가 되는데, - 이후에 파일경로를 추가한다. 7. pub get으로 완전추가한다. 생각보다 과정이 좀 있더라.. 1. asset폴더를 복사(ctrl + c)한 후 2. 프로젝트에 해당되는 곳에 붙여넣기(ctrl + v) 하면 asset폴더가 잘 들어가 있음.. 3. pubspec.yaml 야멜파일로 간다. 4. 야멜 파일에서 스크롤을..