예츄의 개발기록

메인 메소드 에서는 QuoteList()의 클래스를 실행한다. void main() => runApp(MaterialApp( home: QuoteList(), )); QuoteList() 클래스 안에는 타입의 List가 선언되어 있는데, Quote 클래스는 다음과 같다. class Quote { String text; String author; Quote({this.text, this.author}); } 작가와, 글을 나타내기 위해 필드와 생성자를 선언해준다. 위의 생성자는 name parmeter 인 {}를 이용하여 선언했다. 이 경우라면, 후에 데이터를 넣는 경우 다음과 같이 작성할 수 있다. name parameter를 쓰는 경우 순서가 바뀌어도 상관없다 -> Quote(author: ~, tex..

간단한 ID 카드를 만들어보자 메인 메소드에서는 NinjaCard()라는 클래스를 실행시켜준다. 그리고 NinjaCard()는 StatelessWidget을 상속하여 (데이터 변하지 않음) 아이디 카드를 만들어본다. NinjaCard 클래스는 Scaffold() 위젯을 리턴하고, Scaffold() 안에 위젯을 넣어 꾸미면 된다. 1. appBar 부분에는 AppBar 위젯을 선언하여, 제목, 제목의 위치, 배경색을주고 플랫하게 만들기 위해 elevation을 0.0으로 설정한다. 2. body 부분에는 일단 패딩을 주어 left, top, right, bottom 패딩을 설정한다. child로 Column위젯을 넣고, Column위젯에 children을 주는데, children은 타입들이다. 처음에 나..

1. Expanded Widget widget을 정렬하고 나서 그 위젯으로 화면을 채우고 싶다면 어떻게 하는 게 좋을까? 안드로이드 스튜디오에서 weight를 주듯 비슷하게 하면 된다. Container 위젯이 처음에 3개 있다고 했을 때, 위젯에 마우스를 갖다대고 wrapped width widget을 선택해준다. 그리고 widget을 Expanded로 설정하면 3개의 container가 한 줄에 꽉 차게 된다. 이 때, 비율을 다르게 하고 싶다면 flex 값을 주면 된다. 만일 3, 2, 1 이런식으로 값을 주면, 6/3, 6/2, 6/1 의 너비를 갖게된다. (총 너비 6--> flex 더한거) 그리고 이미지도 똑같이 Expanded로 위젯으로 감싸서 주면 컨테이너 위에 해당되는 너비 만큼의 이미지..

1.Row 위젯 Row 위젯을 사용하면 한 줄(행)에 여러가지를 보이게 만들 수 있다. body에 Row 위젯을 추가한다. Row 위젯에 child가 하나만 있어야만 하는 게 아니기 때문에 child가 아닌 children을 사용한다. children의 리턴 타입은 이다. [] 로 감싸진 것을 통해 알 수 있듯이 여기에 다양한 위젯들을 넣을 수 있다. body: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('hello, world'), FlatButton( onPressed: (){}, color: Colors.amber, child: Te..

컨테이너 위젯을 이용해보고 패딩을 설정해보자 코드는 간략하게 바디에서 컨테이너 위젯을 만들어준다 body: Container( padding: EdgeInsets.all(30), color: Colors.grey, child: Text('hello'), ), 패딩을 설정할때는 바로 패딩에 값을 넣어줄 수는 없고, EdgeInsets를 활용하여 값을 줄 수 있다. 위의 경우, 각각 패딩 30이 들어간다. 여기서 child 인 텍스트를 제거하는 경우, 화면 전체가 회색이 되지만, child로 Text 위젯을 주게되면, 텍스트를 감싸는 만큼에만 회색이 들어간다. 그리고 패딩 값을 준만큼 패딩이 들어간다. padding : EdgeInsets.symmetric(horizontal: 30.0, vertical: ..

버튼 또는 아이콘을 설정해보자 1. 아이콘만 넣기 class Home extends StatelessWidget { @override Widget build(BuildContext context) {// return Widget return Scaffold( //wrapper for some widgets appBar: AppBar( // property : widget (value) 이런식으로 작성해야함 title: Text('my first app'), centerTitle: true, backgroundColor: Colors.red[600], ), body: Center( child: Icon( Icons.airport_shuttle, color:Colors.lightBlue, size:50/0,..

플러터는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크로 쉽게 예쁜 앱을 제작할 수 있다. 언어는 Dart를 기반으로 하고 있고, Dart는 다른 프로그램 언어의 기본적인 내용을 알고 있다면 쉽게 배울 수 있다. 클래스, 메소드 등을 이해하고 있다면 어렵지 않아보인다.. 플러터의 핵심은 widget, widget widget! 다 위젯이다. 자바처럼 main 함수가 있다. 한줄일때는 화살표 함수로 나타낼 수 있으며 괄호도 생략이 가능하다. ......그나저나 플러터가 안드로이드보다 리소스를 많이 먹는지 맥북에어에서 apk가 만들어지지 않는다 무한로딩이다 안드로이드를 겨우 버텨내는 2013 맥북에어.....버리고 싶다. 처음에 import 인 부분을 보면 dart를 사용한다는 것을 알 수 있..