Centre verticalement Aligner le texte dans le flutter de Textfield

Question

J'ai essayé de trouver beaucoup de ressources, mais malheureusement, je n'ai pas pu trouver un moyen d'aligner le texte verticalement au centre de Textfield. J'ai aussi essayé d'utiliser Suffixicon au lieu de suffixer mais toujours pas de la chance. Voici mon code:

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(
          Icons.menu,
          color: Colors.black,
        ),
        backgroundColor: Colors.white,
        title: Container(
          margin: EdgeInsets.only(bottom: 10),
          child: Image.asset(
            "icons/logo.png",
          ),
        ),
        bottom: PreferredSize(
          child: Padding(
            padding: EdgeInsets.only(
              left: 10,
              right: 10,
              bottom: 10,
            ),
            child: Container(
              height: 40,
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                style: TextStyle(
                  fontSize: 13,
                ),
                decoration: InputDecoration(
                    suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                    )
                ),
              ),
            ),
          ),
          preferredSize: Size(MediaQuery.of(context).size.width, 50),
        ),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 11),
        child: Column(
          children: <Widget>[
            Carousel(),
          ],
        ),
      ),
    );
  }
}

class Carousel extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CarouselState();
  }
}

class _CarouselState extends State<Carousel> {
  List<String> urls = [];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Stack(
        children: <Widget>[
          Image.network(
              "someImageUrlHere."),
          Positioned(
            bottom: 5,
            width: MediaQuery.of(context).size.width - 20,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("•"),
                Text("•"),
                Text("•"),
                Text("•"),
                Text("•"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Qu'est-ce qui pourrait être la question qui cause ce problème? Et comment puis-je résoudre ce problème?

Answer 1

S'il vous plaît essayez de envelopper par colonne et d'ajouter une propriété 'MainAxisalignment' avec 'Mainaxisalignment.center'

    Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start, // If you want align text to left
          children: <Widget>[
            TextField(
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                style: TextStyle(
                  fontSize: 13,
                ),
                decoration: InputDecoration(
                    suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                    )
                ),
              ),
          ],
        ),
      )

Answer 2

La date de la date est la cueillette parfaite mais la valeur d'alignement et de date d'indice n'est pas alignée au même endroit.

 Container(
                  child: Padding(
                    padding: const EdgeInsets.only(
                        left: 15.0, right: 15.0, top: 15.0, bottom: 10.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Center(
                          child: Image.asset(
                            "assets/images/date.png",
                            // width: 20,
                            width: SizeConfig.safeBlockHorizontal * 4,
                          ),
                        ),
                        SizedBox(
                          width: 15,
                        ),
                        Flexible(
                          child: Center(
                            child: DateTimeField(
                              decoration: InputDecoration.collapsed(
                                hintText: "Start date and time",
                                hintStyle: TextStyle(
                                  // fontSize: 14,
                                  fontSize: SizeConfig.safeBlockHorizontal * 3,
                                ),
                                border: InputBorder.none,
                              ),
                              validator: validateStartDate,
                              onSaved: (DateTime val) {
                                _startDate = val;
                              },
                              format: format,
                              style: TextStyle(
                                fontSize: SizeConfig.safeBlockHorizontal * 3,
                              ),
                              onShowPicker: (context, currentValue) async {
                                // FocusScope.of(context).previousFocus();
                                final Startdate = await showDatePicker(
                                    context: context,
                                    firstDate: DateTime.now()
                                        .subtract(Duration(days: 1)),
                                    initialDate: currentValue ??    DateTime.now(),
                                    lastDate: DateTime(2100));
                                if (Startdate != null) {
                                  final StartTime = await showTimePicker(
                                    context: context,
                                    initialTime: TimeOfDay.fromDateTime(
                                        currentValue ?? DateTime.now()),
                                  );
                                  setState(() {
                                    StartDate = DateTimeField.combine(
                                        Startdate, StartTime);
                                  });
                                  return DateTimeField.combine(
                                      Startdate, StartTime);
                                } else {
                                  return currentValue;
                                }
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

`] 1

Answer 3

TextField(
   textAlign: TextAlign.center,
   decoration: InputDecoration(
     hintText: "Centered Hint",
   ),
)

J'espère que cela sera utile.