떨림: 대화 페이지 하단 텍스트 표시줄을 만드는 방법

떨림: 대화 페이지 하단 텍스트 표시줄을 만드는 방법

나는 이렇게 보이는 flot에 채팅 페이지를 만들려고 노력하고 있다: . 보내기 버튼으로 상단 앱바와 텍스트 필드를 모두 만들 수 있었지만, 페이지 하단에 텍스트 필드를 제대로 배치하지 못했습니다. 정렬 및 확장, 바닥글, 하단 탐색 막대 등을 사용해 보았습니다.

내가 붙여넣은 코드의 현재 버전은 상단 앱바만 보여준다. 하위 행과 보내기 버튼을 빼면 페이지 하단에 텍스트 필드가 있다. 전송 단추를 추가할 수 있도록 하위 행을 추가하는 즉시 전체 텍스트 필드가 화면에 표시되지 않습니다. 어떤 도움이라도 감사하겠습니다.

참고: 채팅 화면을 만들려고 하기 때문에 중간 섹션을 스크롤할 수 있도록(위와 아래가 남아 있는 동안), 나중에 채팅 버블을 추가할 수 있도록 하고 싶습니다.

코드 스니펫의 잘못된 편집으로 인한 코드 스크린샷 코드 스니펫의 계속

""" @위젯 빌드(BuildContext context) { 반환 발판(backgroundColor: ColorConstant)을 재정의합니다.whiteA700, // 상단 바 앱바: 앱바(배경색: ColorConstant.deepOrange300, 제목: 텍스트("일치 이름", 스타일: AppStyle.textstyle interregular15.copyWith(fontSize: getFontSize(15)),

  body: Column(
    children: [
      Expanded(child: SingleChildScrollView(
          child: Column(
            children: [
              // Bubbles
            ],
          ),
        ),
      ),
      Container(    
        height: 45,
        width: double.infinity,
        color: ColorConstant.whiteA700,
        child: Row(children: <Widget>[
          TextField(
            decoration: InputDecoration(
              hintText: "Message...",
              hintStyle: TextStyle(color: ColorConstant.bluegray100),
              border: OutlineInputBorder(
                borderSide: BorderSide(color: ColorConstant.bluegray100)
              ),
            )
          ),
          SizedBox(width: 15,),
          // Send Button
          FloatingActionButton(  
            onPressed: (){},
            child: Icon(Icons.send,color: ColorConstant.whiteA700,size: 18,),
            backgroundColor: ColorConstant.lightBlueA100,
            elevation: 0,
          ),
        ]),
      );
    ],
  ),
);

"""

---

이것을 시도해봐...

     bottomNavigationBar: Padding(
            padding:
                EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
              height: 45,
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: Row(
                children: [
                  Expanded(
                    child: const TextField(
                      decoration: InputDecoration(
                        hintText: "Message...",
                        hintStyle: TextStyle(color: Colors.blue),
                        border: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue)),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  // Send Button
                  MaterialButton(
                    color: Colors.red,
                    onPressed: () {},
                    child: Icon(
                      Icons.send,
                      color: Colors.white,
                      size: 18,
                    ),
                    // backgroundColor: ColorConstant.lightBlueA100,
                    elevation: 0,
                   ),
                ],
              ),
            ),
          ),
    

---

위젯으로 포장하시면 됩니다.