huixiang_app/lib/order/edit_remarks_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/my_appbar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class EditRemarksPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _EditRemarksPage();
  }
}

class _EditRemarksPage extends State<EditRemarksPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        title: S.of(context).beizhu,
        titleColor: Colors.black,
        leadingColor: Colors.black,
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 16.w, top: 20.h, right: 16.w),
              width: MediaQuery.of(context).size.width,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "快捷输入",
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF353535),
                    ),
                  ),
                  SizedBox(
                    height: 24.h,
                  ),
                  Wrap(
                    spacing: 12.w,
                    runSpacing: 10.h,
                    children: remarks(),
                  ),
                  SizedBox(
                    height: 32.h,
                  ),
                  Container(
                    height: 128.h,
                    padding: EdgeInsets.all(16.w),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8.w),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withAlpha(12),
                          offset: Offset(0, 3),
                          blurRadius: 14,
                          spreadRadius: 0,
                        )
                      ],
                    ),
                    child: TextField(
                      decoration: InputDecoration(
                        isDense: true,
                        hintText: '请填写备注信息，例如:面包切一刀',
                        hintStyle: TextStyle(
                          color: Color(0xFF353535),
                          fontSize: 16.sp,
                        ),
                        border: InputBorder.none,
                        suffixIconConstraints: BoxConstraints(
                          minHeight: 128.h,
                          maxHeight: 128.h,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            flex: 1,
          ),
          Container(
            padding: EdgeInsets.all(16.h),
            width: MediaQuery.of(context).size.width,
            alignment: Alignment.center,
            color: Color(0xFF32A060),
            child: Text(
              S.of(context).tijiao,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 16.sp,
              ),
            ),
          ),
        ],
      ),
    );
  }

  List<Widget> remarks() {
    return [
      Container(
        padding: EdgeInsets.symmetric(vertical: 6.h, horizontal: 22.w),
        decoration: BoxDecoration(
          color: Color(0xFF32A060),
          borderRadius: BorderRadius.circular(4.w),
        ),
        child: Text(
          "面包",
          style: TextStyle(
            color: Colors.white,
            fontSize: 12.sp,
          ),
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(vertical: 6.h, horizontal: 22.w),
        decoration: BoxDecoration(
          color: Color(0xFF32A060),
          borderRadius: BorderRadius.circular(4.w),
        ),
        child: Text(
          "面包要切好",
          style: TextStyle(
            color: Colors.white,
            fontSize: 12.sp,
          ),
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(vertical: 6.h, horizontal: 22.w),
        decoration: BoxDecoration(
          color: Color(0xFF32A060),
          borderRadius: BorderRadius.circular(4.w),
        ),
        child: Text(
          "一点",
          style: TextStyle(
            color: Colors.white,
            fontSize: 12.sp,
          ),
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(vertical: 6.h, horizontal: 22.w),
        decoration: BoxDecoration(
          color: Color(0xFF32A060),
          borderRadius: BorderRadius.circular(4.w),
        ),
        child: Text(
          "点",
          style: TextStyle(
            color: Colors.white,
            fontSize: 12.sp,
          ),
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(vertical: 6.h, horizontal: 22.w),
        decoration: BoxDecoration(
          color: Color(0xFF32A060),
          borderRadius: BorderRadius.circular(4.w),
        ),
        child: Text(
          "软一点",
          style: TextStyle(
            color: Colors.white,
            fontSize: 12.sp,
          ),
        ),
      ),
    ];
  }
}