import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(
children: [
Container(
color: Colors.orange,
child: TextField(
decoration: InputDecoration(
suffix: IconButton(
icon: Icon(Icons.check_circle),
onPressed: () {
print('222');
}),
),
),
),
],
),
),
),
);
}
}
How can I force the check_circle icon to automatically resize to match the height of the actual TextField, i.e., wrt its cursor height?
3 Réponses :
Utilisez plutôt suffixIcon .
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(
children: [
Container(
color: Colors.orange,
child: TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.check_circle),
onPressed: () {
print('222');
}),
),
),
),
],
),
),
),
);
}
}
Cela n'a pas fonctionné; L'icône est restée la même taille, quelle que soit l'échelle de taille de police spécifiée dans les paramètres d'accessibilité des téléphones.
Très bonne question ...
L'essentiel est de réinitialiser tous les rembourrages dans le TextField et de ne pas utiliser IconButton (car tous les composants Material ont des rembourrages prédéfinis et internes que vous ne pouvez pas modifier).
On dirait que le suffixe est aligné sur la ligne de base du texte, empêchant l'interaction de l'encre du matériau, tandis que les suffixIcons sont correctement centrés dans la zone de texte, MAIS propage l'encre vers le TextField. Donc, jusqu'à présent, je n'ai pas trouvé de moyen de le faire correctement, peut-être qu'il me manque un widget / une logique.
Vérifiez la capture d'écran en bas qui montre pourquoi le suffixe ne pourra pas s'aligner avec le texte, car il se trouve dans la ligne de base elle-même et le curseur génère une plus grande hauteur .....
dans les 2 premiers champs de texte, les cases GRISES sont le suffixe et le jaune suffixIcon (qui se centre correctement).
Solution 1: (dans la capture d'écran, il y a un fond rouge avec 2 cases à cocher) Si vous le pouvez (en termes de conception), créez une ligne et placez le TextField et l'icône:
var inputBorderDecoration = OutlineInputBorder(
borderRadius: BorderRadius.zero,
borderSide: BorderSide(width: 1, color: Colors.black));
double fontSize = 24;
return GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Container(
color: Colors.green.shade50,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 300,
height: fontSize,
color: Colors.orange,
child: TextField(
style: TextStyle(fontSize: fontSize, color: Colors.white),
decoration: InputDecoration(
fillColor: Colors.purple.withOpacity(.5),
filled: true,
border: inputBorderDecoration,
focusedBorder: inputBorderDecoration,
enabledBorder: inputBorderDecoration,
contentPadding: EdgeInsets.zero,
suffixIcon: GestureDetector(
onTap: () => print('on tap'),
child: Container(
color: Colors.green,
child: FittedBox(
alignment: Alignment.center,
fit: BoxFit.fitHeight,
child: IconTheme(
data: IconThemeData(),
child: Icon(
Icons.check_circle,
color: Colors.white,
),
),
),
),
),
),
),
),
],
),
),
),
);
Solution 2: (dans la capture d'écran, dernier champ de texte, boîte verte avec icône blanche) Enveloppez la décoration de l'icône, c'est la meilleure approche de l'interface utilisateur, mais le TextField recevra toujours des événements tactiles.
var inputBorderDecoration = OutlineInputBorder(
borderRadius: BorderRadius.zero,
borderSide: BorderSide(width: 1, color: Colors.black));
double textHeight = 40;
// define a width if you want, or let the constrains of the parent define it.
double inputWidth = double.infinity;
return Center(
child: Container(
width: inputWidth,
height: textHeight,
color: Colors.green.withOpacity(.2),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Flexible(
child: TextField(
controller: TextEditingController(text: 'hello world'),
style: TextStyle(fontSize: textHeight),
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
enabledBorder: inputBorderDecoration,
focusedBorder: inputBorderDecoration,
filled: true,
fillColor: Colors.red.withOpacity(.5),
),
),
),
FittedBox(
child: InkWell(
onTap: () => print("touch button"),
child: Icon(Icons.check_circle),
),
),
],
)),
);
Solution 3:
Construisez vous-même les décorations en utilisantEditableText
Merci pour une réponse aussi approfondie, mais lorsque j'ai lancé le textScaleFactor jusqu'à 2.0, le texte est sorti du conteneur.
Stack utilisée
Stack(
children: [
TextField(),
Positioned.fill(
right: 10,
child: Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
searchController.clear();
},
child: Icon(Icons.clear))))
],
),