플러터

▪ 완성 할 레이아웃 저 레이아웃을 만들어야하는데, 전체적으로 감싼 Container 가 있고, 그 안에 Column로 한번 더 감싸고, 각 레이아웃을 만들기 위해서 설계 계획을 세웠다. Column( children: [ 1. Container - 학교 이메일이라는 Text를 쓸 것 2. Row - TextFormField(이메일 input) , OutlinedButton(인증하기) 3. SizedBox - input 사이에 간격을 위해서 4. TextFormField - 인증번호 입력 input 5. OutlinedButton - 다음 버튼 ] ) ▪ 문제 발생 1을 하고 2번으로 넘어갈 때 우선 Row를 안 쓰고, TextFormField를 먼저 썼는데 화면에 출력이 안 되는거다! 이 전에 유튜버 ..

플러터에서는 route라는 개념으로 페이지 이동이 가능합니다. 이 때 이동할 곳을 page라고 생각해주면 됩니다. 굳이 파일을 따로 나누지 않아도 같은 파일 안에서 page만 나눠주면 됩니다. 참 쉽죵? 😁 이동 할 때 쓰는 것으로는 Navagator 메서드를 사용하시면 됩니다. main.dart Container( margin: EdgeInsets.only(top: 100, left: 0), width: 100, child: IconButton( icon: Text('Signup', style: TextStyle(fontSize: 20),), onPressed: (){ Navigator.push(context, MaterialPageRoute(builder: (context) => SignUpPage(..

반복되는 부분을 손수 쓰지 않고 반복해서 만들 수 있다. 이 때 쓸 수 있는 것이 ListView.builder 이다. ◾ Example 지금부터 만들어 볼 부분인데 보라색이 list_view부분이고 icons가 파란색부분이다 ◾ Code list_view에 반복되는 부분을 따로 파일(icons.dart)로 빼서 더하는거다. list_view.dart Container( margin: EdgeInsets.only(top: 10, bottom: 20), child: Text('${descList[index]}'), ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( '${majorList[index]}', style: T..

ListView.builder을 사용해서 구현하다가 본 마주한 에러이다. 리스트를 5개 정도를 만들어서 반복시켰는데 에뮬레이터 화면에 노란 바탕에 위와 같은 에러가 뜬다. ◾ 해결방안 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('예술체육학과'), centerTitle: true, backgroundColor: Colors.white, elevation: 0, leading: IconButton( icon: Icon(Icons.arrow_back), color: Colors.grey, iconSize: 25.0, onPressed: () {}, ), actions: [ Container..

◾ 완성모습 앞서 아이콘을 넣어서 만든 메뉴에 햄버거 버튼을 눌렀을 때 사이드로 열리는 메뉴를 만들었습니다! flutter에서는 drawer이라는 것으로 쉽게 만들 수 가 있답니다! ◾ 기본 구성 drawer 을 만들고, 그 안에 자식 위젯(child)으로 ListView를 만들어줍니다. 그 자식 위젯 안에 또 다른 하위 위젯(children)을 생성해줍니다. ListView는 두가지로 구성이 됩니다. 일단 Header부분에서 계정이름, 프로필 사진 등을 넣어주고, 다른 페이지로 넘어갈 수 있는 메뉴를 ListTile이라는 이름 아래 생성해줍니다 ListTile구성에 보시면 onTap이 있는데, 이 부분은 나중에 가면 더 깊게 공부할 예정이지만 간단하게 onPressed와 비교해보자면 onPressed는..

◾ 완성 모습 ◾ code class Grade extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.amber[800], appBar: AppBar( title: Text('BBANTO'), centerTitle: true, backgroundColor: Colors.amber[700], elevation: 0.0, //left side leading: IconButton( icon: Icon(Icons.menu), onPressed: () { print('menu button is clicked'); }, ), actions: [ IconButton( ..

1. Flutter에서 위젯이란? UI를 만들고 구성하는 모든 기본 단위 요소를 위젯이라고 합니다. 눈에 보이는 요소뿐만 아니라 보이지 않는 요소들까지도 위젯이라고 합니다. 한마디로 Eveything is Widget. 2. 위젯 타입 Stateless widget 상태가 없는 정적인 위젯을 뜻합니다. 스크린상에 존재는 하지만 아무것도 가지지 않고, 실시간 데이터 저장을 못하는 위젯입니다. 어떠한 상탱를 유발하는 value 값도 가지지 않고 있습니다. 예를 들어서 image, text Stateful widget 어떤 상태를 가지고 계속 움직임이나 변화가 있는 위젯 사용자 인터랙션에 따라서 달라지는 위젯입니다. 예를 들면 input, checkbox 3. 위젯 구성(트리) 위의 설명처럼 많은 요소들이 위..