Center Input example

readme.md

Center Input example

Created with <3 with dartpad.dev 点这里查看效果.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

int _counter = 0;
final TextEditingController _controller =
    TextEditingController(text: _counter.toString());

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  height: 40,
                  width: 40,
                  child: ElevatedButton(
                    style: ButtonStyle(
                      shadowColor:
                          MaterialStateProperty.all(Colors.transparent),
                      //圆角
                      shape: MaterialStateProperty.all(
                          const RoundedRectangleBorder(
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(10),
                                  bottomLeft: Radius.circular(10)))),
                      padding: const MaterialStatePropertyAll(
                          EdgeInsets.symmetric(horizontal: 0)),
                    ),
                    onPressed: () {
                      setState(() {
                        _counter--;
                        _controller.text = _counter.toString();
                      });
                    },
                    child: const Icon(Icons.remove),
                  ),
                ),
                Container(
                  height: 40,
                  width: 80,
                  // 让TextField实现上下居中，
                  alignment: Alignment.center,
                  decoration: const BoxDecoration(
                      shape: BoxShape.rectangle,
                      // borderRadius: BorderRadius.circular(0),
                      //上下边框
                      border: Border.symmetric(
                        horizontal: BorderSide(color: Colors.blue, width: 2),
                        vertical: BorderSide(color: Colors.blue, width: 0),
                      )),
                  child: TextField(
                    onChanged: (value) => _counter = int.parse(value),
                    controller: _controller,
                    // 让TextField内容实现左右居中，
                    textAlign: TextAlign.center,
                    decoration: const InputDecoration(
                      hintText: "请输入",
                      hintStyle: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w200,
                          color: Color(0xFF999999)),
                      // contentPadding和border的设置是为了让TextField内容实现上下居中
                      contentPadding: EdgeInsets.all(0),
                      border: OutlineInputBorder(borderSide: BorderSide.none),
                    ),
                  ),
                ),
                SizedBox(
                  height: 40,
                  width: 40,
                  child: ElevatedButton(
                    style: ButtonStyle(
                      shadowColor:
                          MaterialStateProperty.all(Colors.transparent),
                      //圆角
                      shape: MaterialStateProperty.all(
                          const RoundedRectangleBorder(
                              borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(10),
                                  bottomRight: Radius.circular(10)))),
                      padding: const MaterialStatePropertyAll(
                          EdgeInsets.symmetric(horizontal: 0)),
                    ),
                    onPressed: () {
                      setState(() {
                        _counter++;
                        _controller.text = _counter.toString();
                      });
                    },
                    child: const Icon(Icons.add),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}