flutter - 일정 작성 페이지 그리기

 

1️⃣ TextField에 icon과 text를 넣어주고, border를 주어 경계를 만들어 줌

Widget _buildMemo(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10, top: 16),
      child: Container(
        width: MediaQuery.of(context).size.width,
        //반응형을 위한 가로 폭
        height: 55,

        child: Stack(
          children: [
            Positioned(
              top: 8,
              left: 4,
              child: SvgPicture.asset("assets/icon_pen.svg", width: 13),
            ),
            TextField(
              controller: _textController,
              style: textTheme(color: kchacholGreyColor()).headline2,
              maxLines: null, //이걸 NULL 로 해주고
              maxLength: 80,
              decoration: const InputDecoration(
                isDense: false,
                hintText: "메모",
                hintStyle: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Color(0xff9999A3),
                  height: 1.6,
                ),
                focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xffF2F2F2))),
                enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xffF2F2F2))),
                focusColor: Color(0xff9999A3),
                contentPadding: EdgeInsets.only(left: 34, bottom: 16),
              ),
              onSubmitted: _handleSubmitted,
            ),
            // Positioned(
            //   right: 0,
            //   child: SvgPicture.asset("assets/photo_plus_icon.svg", width: 26),
            // ),
          ],
        ),
      ),
    );
  }

 

 

 

2️⃣ 반복설정 하기

① 그림 그리기

Widget _buildRepeatSetting(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.only(left: 4),
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(border: Border(bottom: BorderSide(color: klightGreyColor(), width: 1))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                //SizedBox(width: 5),
                SvgPicture.asset(
                  "assets/icon_repeat.svg",
                  width: 12,
                ),
                SizedBox(width: 20),
                Container(
                  width: MediaQuery.of(context).size.width * 0.8,
                  //반응형을 위한 가로 폭
                  height: 55,
                  padding: EdgeInsets.symmetric(vertical: 8),
                  child: GestureDetector(
                    onTap: () {},
                    child: Row(
                      //mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Expanded(
                          child: TextField(
                            decoration: InputDecoration(
                                hintText: "${hintText[selectedId]}",
                                border: InputBorder.none,
                                isDense: true,
                                hintStyle: textTheme(color: kchacholGreyColor(), weight: FontWeight.w600).headline3),
                            readOnly: true,
                            style: textTheme(color: primary).headline3,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),

Widget _buildRepeatButton(int id, String hintText) {
    return Padding(
      padding: const EdgeInsets.only(top: 6, left: 0, right: 0),
      child: Row(
        children: [
          hintText == "반복 안함"
              ? Container(
                  height: 35,
                  padding: EdgeInsets.only(right: 8),
                  child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        selectedId = id;
                      });
                    },
                    child: Text(
                      hintText,
                      style: textTheme(color: Colors.white, weight: FontWeight.w500).bodyText1,
                    ),
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      elevation: 0.0,
                      padding: EdgeInsets.only(left: 11, top: 3, right: 11, bottom: 2),
                    ),
                  ),
                )
              : Container(
                  padding: EdgeInsets.only(right: 8),
                  width: 68,
                  height: 35,
                  child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        selectedId = id;
                      });
                    },
                    child: Text(
                      hintText,
                      style: textTheme(color: kchacholGreyColor(), weight: FontWeight.w500).bodyText1,
                    ),
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      elevation: 0.0,
                      padding: EdgeInsets.only(left: 11, top: 3, right: 11, bottom: 2),
                      primary: klightGreyColor(),
                    ),
                  ),
                ),
        ],
      ),
    );
  }

➡ hintText가 "반복 안함"일 때만 button에 컬러를 줌

 

 

② 반복안함, 매일, 매주, 매월 버튼 클릭시 text 바인딩하기

int selectedId = 0;

ElevatedButton(
    onPressed: () {
      setState(() {
        selectedId = id;
     });
 },

➡ selectedId = 0으로 초기화하고, button을 setState로 id값을 넘겨줌

 

List<String> hintText = ["반복 안함", "매일", "매주", "매월"];

➡ hitText를 배열로 선언하고 button에 받아 줌

 

Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      _buildRepeatButton(0, "반복 안함"),
      _buildRepeatButton(1, "매일"),
      _buildRepeatButton(2, "매주"),
      _buildRepeatButton(3, "매월"),
    ],
),

➡ Row로 button을 나열하고, button에 id값과 hintText를 넣어주면 됨!