efats

lib/main.dart

@@ -1,8 +1,10 @@
 
 import 'package:farmer_client/models/Store.dart';
 import 'package:farmer_client/services/user.dart';
+import 'package:farmer_client/widgets/Cell.dart';
 import 'package:farmer_client/widgets/GradientButton.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 
 void main() {
@@ -16,7 +18,6 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     Store().init();
-
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
@@ -75,6 +76,15 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
 
+    ScreenUtil.init(
+        BoxConstraints(
+            maxWidth: MediaQuery.of(context).size.width,
+            maxHeight: MediaQuery.of(context).size.height),
+        designSize: const Size(375, 812),
+        context: context,
+        minTextAdapt: true,
+        orientation: Orientation.portrait);
+
     // var find = Get.find(tag: 'user');
 
     // This method is rerun every time setState is called, for instance as done
@@ -116,10 +126,36 @@ class _MyHomePageState extends State<MyHomePage> {
               '$_counter',
               style: Theme.of(context).textTheme.headline4,
             ),
-            GradientButton(
-              colors: const [Colors.orange, Colors.red],
-              child: const Text("Submit"),
-              onPressed: onTap,
+            Cell(
+              margin: EdgeInsets.symmetric(horizontal: 13.w),
+              header: Text("+86", style: TextStyle(fontSize: 19.sp),),
+              child: TextField(
+                style: TextStyle(
+                  fontSize: 17.sp,
+                ),
+                decoration: const InputDecoration(
+                  isCollapsed:true,
+                  contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+                  labelText: "请输入手机号码",
+                  border: InputBorder.none,
+                  // border: OutlineInputBorder(
+                  //   // borderSide: BorderSide.none,
+                  //   // gapPadding: 0,
+                  // ),
+                  floatingLabelBehavior: FloatingLabelBehavior.never,
+                )
+              ),
+              footer: ElevatedButton(
+                onPressed: () => {},
+                child: Text("获取验证码", style: TextStyle(fontSize: 15.sp),),
+                style: ElevatedButton.styleFrom(
+                  primary: const Color(0xFFFF703B),
+                  elevation: 0,
+                  shape: const RoundedRectangleBorder(
+                    borderRadius: BorderRadius.all(Radius.circular(10))
+                  )
+                ),
+              ),
             ),
           ],
         ),

lib/widgets/Cell.dart

@@ -0,0 +1,54 @@
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class Cell extends StatelessWidget {
+  const Cell ({
+    Key? key,
+    this.header,
+    required this.child,
+    this.footer,
+    this.margin,
+  }) : super(key: key);
+
+  final Widget? header;
+  final Widget child;
+  final Widget? footer;
+  final EdgeInsetsGeometry? margin;
+
+  @override
+  Widget build(BuildContext context) {
+
+    return Container(
+      margin: margin,
+      padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 0.0),
+      decoration: const BoxDecoration(
+        border: Border(
+          bottom: BorderSide(width: 1.0, color: Color(0x1F000000)),
+        )
+      ),
+      child: Row(
+        children: [
+          if (null != header) SizedBox(
+            width: 53.w,
+            child: Container(
+              decoration: const BoxDecoration(
+                border: Border(
+                  right: BorderSide(width: 1, color: Color(0xFF333333))
+                )
+              ),
+              child: header,
+            ),
+          ),
+          Expanded(child: child,),
+          if (null != footer) ConstrainedBox (
+            constraints: BoxConstraints(maxWidth: 94.w),
+            child: footer,
+          )
+        ],
+      ),
+    );
+  }
+  
+}

pubspec.lock

@@ -146,6 +146,13 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.0.4"
+  flutter_screenutil:
+    dependency: "direct main"
+    description:
+      name: flutter_screenutil
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "5.3.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter

pubspec.yaml

@@ -37,6 +37,7 @@ dependencies:
   json_serializable: ^6.1.5
   get: ^4.6.1
   dio: ^4.0.6
+  flutter_screenutil: ^5.3.1
 
 dev_dependencies:
   flutter_test: