J'ai essayé de trouver dans beaucoup de ressources mais malheureusement je n'ai pas pu trouver un moyen d'aligner le texte verticalement au centre d'un champ de texte. J'ai également essayé d'utiliser suffixIcon au lieu de suffixe mais toujours pas de 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("•"),
],
),
),
],
),
);
}
}
Quel pourrait être le problème à l'origine de ce problème? et comment puis-je résoudre ce problème?
5 Réponses :
Veuillez essayer d'encapsuler par colonne et ajouter la 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)),
)
),
),
],
),
)
J'ai une solution pour TextField sur une seule ligne. Placer TextField dans un conteneur avec la propriété height, (dans mon cas, également width) puis donner une valeur contentPadding à l'intérieur d'une décoration avec une valeur de height / 2.
Le code est ci-dessous:
Container(
height: textfieldDimension,
width: textfieldDimension,
alignment: Alignment.center,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
bottom: textfieldDimension / 2, // HERE THE IMPORTANT PART
)
),
// textAlignVertical: TextAlignVertical.center, THIS DOES NOT WORK
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10, // This is not so important
),
),
),
L'heure de la date est parfaite, mais l'alignement des indices et la valeur de la date ne sont pas alignés 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
Pour aligner le texte au centre verticalement dans TextField. Vous pouvez simplement définir le contentPadding de votre TextField dans EdgeInsets.zero .
voici comment y parvenir
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
hintText: "password",
),
)
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "Centered Hint",
),
)
Hope so that this will be helpful.
pouvez-vous ajouter une image que vous voulez?
@diegoveloper image où?
Dans ta question