flutter UI 개발하면서 막혔던 것들 정리 1

• SFCalendar : 캘린더 따로 안만들고 가져다가 쓸 수 있다. (syncfusion에서 배포한 라이브러리)
  • 현지화 : 간단히는아래의 코드 블럭을 사용하였음.

    //캘린더 한글 지원위해 사용
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    //현지화 한글로 설정
    supportedLocales: [
      Locale('ko', ''),
      Locale('en', ''),
    ],​

• ---

  DateFormat :

  DateFormat('yyyy-MM-dd').format(DateTime.now())

• ---

  Container  
  • margin : 컨테이너 바깥 여백
  • decoration : container를 꾸민다. BoxDecoration으로 color와 borderRadius, boxShadow를 정할 수 있다. 
  • child : container 내부에 보여줄 것을 넣으면 된다. 아래의 예시는 text가 들어감
  • 아래는 사용 예시임. 아래외에 여러 속성이 있으므로 찾아서 사용해볼 것!.
    

    Container(
    	//중앙으로 정렬
    	alignment: Alignment.center,
        //가로
        width: 70,
        //높이
        height: 30,
        //Container 꾸미기
        decoration: BoxDecoration(
        	//container 색깔
           	color: Color.fromRGBO(193, 214, 233, 1),
            //둥글기
           	borderRadius: BorderRadius.all( //all은 모서리 전체
           	Radius.circular(10),//둥글게 10깎기
        ),
        //그림자 설정
        boxShadow: [
           BoxShadow(
             color: Colors.white.withOpacity(1),
             //그림자 얼마나 퍼지게 설정할지
             spreadRadius: 0,
             //흐림처리
             blurRadius: 17,
             //container에서 그림자 적용할 위치
             offset: Offset(-10, -3),
           ),
        ],
        //container 안에 넣을 내용 (아래는 text를 넣음)
        child: Text(
        		//텍스트 내용
               "Diary",
               //텍스트 스타일
               style: TextStyle(color: Colors.black),
        ),
    ),

• ---

  Align : 내부 속성들을 한번에 정렬할 때 사용한다.

  Align(
  	//중앙 정렬
  	alignment: Alignment.center,
      //align content
      child: Text(
      	"확인할 일기가 없습니다",
      	style: TextStyle(
      		fontSize: 18,
      		fontWeight: FontWeight.bold,
      		color: Colors.white),
      ),
  )​

---

• Future.delayed : 팝업창 등을 일정 시간 뒤에 사라지게 만든다.

  Future.delayed(
  	//second도 가능함. 나는 milliseconds 600 사용
  	const Duration(milliseconds: 600), () {
  	//이전 페이지로 가는 코드
      Navigator.pop(context);
  });​

---

• showModalBottomSheet : 화면 아래에서 선택창이 나온다.

  showModalBottomSheet(
  	context: context,
      //sheet의 모양 만들어줌. 직사각형 사용하고 왼쪽, 오른쪽 상단을 둥글게 만들어 주었다.
      shape: RoundedRectangleBorder(
      			borderRadius: BorderRadius.only(
          		topLeft: Radius.circular(15),
          		topRight: Radius.circular(15))),
      //sheet 내용 들어갈 곳
      builder: (context) {
      		//컨테이너 넣어주었음.
      	    return Container(
              		//내부 모서리에서의 얼마나 떨어졌는지에 대한 간격
          			padding: const EdgeInsets.only(
                      			//only를 해주어서 사방을 다 정해주었지만
                                  //all로 하면 알아서 하나의 값으로 padding해준다.
          						top: 40,
          						left: 20,
          						bottom: 20,
          						right: 20,
          			),
                      //container의 내용이 들어갈 곳
                      //나는 listview를 쓸거라 child뒤에 씀
      				child: ListView.builder(...);	
      },
  );​

---

• ListView : 리스트 뷰를 통해 자동적으로 내용에 따라 여러 칸이 생기도록 만들어 주었다.

  ListView(
                //패딩
                padding: EdgeInsets.zero,
                //children은 여러 내용들을 나열해서 쓸 수 있다. 여기서는 ListTile을 여러개 만들음
                children: <Widget>[
                  //리스트 타일로 listview안에 들어갈 연속된 박스들을 만들 수 있음
                  ListTile(
                    //leading은 리스트 타일 내에 왼쪽에 배치하는것 
                    leading: Icon(
                      Icons.supervised_user_circle,
                      color: Colors.grey[850],
                    ),
                    //리스트 타일에 넣을 텍스트
                    title: Text('사용자 설정'),
                    //탭 했을때의 반응, 알람줄거라 나는 알람 함수로 해놓음
                    onTap: () {
                      localnotifyMgr.init().showNotification();
                    },
                  ),
  				//새로운 리스트 타일 위와 같은대로 설정할 수 있음
                  ListTile(...),
                ],
  ),​

---

• floatingActionButton : 앱 화면에 띄우는 버튼 
  • extended :  확장기능

    //원래 FloatingActionButton은 label같은거 쓸 수 없는데 extended를 하면서 더 많은 속성 사용이 가능해짐
    FloatingActionButton.extended(
    			  //텍스트 쓰기
                  label: Text(
                    "new Diary",
                    style: TextStyle(color: Colors.black),
                  ),
                  //아이콘 설정
                  icon: Icon(
                    Icons.mode_edit,
                    color: Colors.black,
                  ),
                  //배경 색
                  backgroundColor: Color.fromRGBO(193, 214, 233, 1),
                  //눌렀을때 반응
                  onPressed: () {
                    showAlertDialog(context);
                  },
                ),​

---

• showDialog : 경고창 눌렀을 때 띄워줌
• AlertDialog : 경고창 내용 만들기

  //알림창 띄워주는 역할 (show!)
  showDialog(
        //배경터치로 꺼지는 것 막기
        barrierDismissible: false,
        context: context,
        builder: (BuildContext context) {
        	//실제 알림창 구성
          return AlertDialog(
          	//알림창의 타이틀
          	title: Text("검색"),
              //알림창 배경
              backgroundColor: Color.fromRGBO(193, 214, 233, 1),
              //들어갈 내용
              content: StatefulBuilder(...),
              //오른쪽에 배치  (leading은 왼쪽에 배치)
              actions:[
              	TextButton(...),
                  TextButton(...),
              ]
          )
        },
      );​

 

---

• ElevatedButton : Flutter의 기본 버튼 중 하나

  ElevatedButton(
  	//눌렀을 때 반응 설정
  	onPressed: () {
      	//누르면 state바뀌게 설정함
      	setState(() {...});
      },
      //버튼 스타일 설정 , ElevatedButton.styleFrom을 사용해서 모양과 색 바꿈
      style: ElevatedButton.styleFrom(
      	primary: _insideColor,
          side: BorderSide(color: _iconColor, width: 2),
  )),​

---

• TextField : 직접 입력할 수 있는 칸 생성

  TextField(
  	//텍스트 필드 꾸미기
  	decoration: InputDecoration(
      	//입력받을 밑줄이 아닌 전체적으로 입력할 곳을 감싸는 형태로 설정
      	border: OutlineInputBorder(),
          //텍스트 필드 내부 패딩
          contentPadding: EdgeInsets.fromLTRB(5, 16, 12, 0),
          	//힌트
              labelText: "제목을 입력하세요",
              //중첩허용 여부
              isCollapsed: true,),
          //입력한 내용 저장할 수 있는 컨트롤러
          //TextEditingController customController = TextEditingController();로 선언되고
          //text속성을 가지고 있다.
          controller: customController,
  ),​

---

• CupertinoDateTextBox : 아이폰 스타일의 날짜 선택기

  CupertinoDateTextBox(
  	//글씨 패딩
  	textfieldPadding: 7,
      //기본 설정
      initialValue: DateTime.now(),
      //날짜 바뀔시 state 변경
      onDateChange: (value) {
      	setState(() {
          	_selectedDateTime = value;
              });
       },
  ),​

---

• DropdownButton : 여러 선택지 중 하나 고를 수 있다.

  DropdownButton(
  	//초기 값
  	value: dropdownvalue,
      //선택지 밑줄 없앰
      underline: Container(
      	//투명으로 만들음 transparent
      	color: Colors.transparent,
      ),
      //item 선택 map으로 만들어서 value값 들어오게 함
      items: items.map((value) {
      	//item 리턴
      	return DropdownMenuItem(
          	value: value, child: Text(value));
              }).toList(),
              //변경 시 state변경
              onChanged: (value) {
              	setState(() {
                  	dropdownvalue = value;
                      });
       },
  ),​

---

• drawer : 메뉴 아이콘 누르면 왼쪽에서 튀어나오는 식으로 생성

  //onpressed에 설정하면 눌렀을 때 drawer로 바로 이동할 수 있다.
  onPressed: () => Scaffold.of(context).openDrawer(),​

  Drawer(
              child: ListView(
                children: <Widget>[
                	//유저 계정위한 header를 만들 수 있음.
                  //이메일등도 따로 있지만 지금은 안써서 지운 상태
                  UserAccountsDrawerHeader(
                    //계정 사진
                    currentAccountPicture: CircleAvatar(
                      // 현재 계정 이미지 set
                      //backgroundImage: AssetImage('assets/profile.png'),
                      backgroundColor: Colors.white,
                    ),
                    //계정이름
                    accountName: Text('~~'),
                    onDetailsPressed: () {
                      print('arrow is clicked');
                    },
                    //꾸미기
                    decoration: BoxDecoration(
                        color: Color.fromRGBO(193, 214, 233, 1),
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(40.0),
                            bottomRight: Radius.circular(40.0))),
                  ),
                  //앞쪽에서 다루었으므로 생략
                  ListTile(...),
                  ListTile(...),
                ],
              ),
            ),​