Widget de texte flottant
Aug 22 2020
J'ai un écran simple avec trois widgets de texte et lorsque l'utilisateur clique sur l'un de ces widgets de texte, ce texte doit devenir la couleur du texte de la police noire et l'autre couleur du widget de texte ne doit pas changer. sur mon code afin que seul le texte cliqué change de couleur.
Fichier Main.Dart
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() {
runApp(myApp());
}
class myApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Demo",
theme: ThemeData(primarySwatch: Colors.blue),
home: HomeData(),
);
}
}
class HomeData extends StatefulWidget {
@override
_HomeDataState createState() => _HomeDataState();
}
class _HomeDataState extends State<HomeData> {
Color _textColor1 = Colors.black;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Demo",
style: TextStyle(color: Colors.white),
),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(0),
child: InkWell(
onTap: () {
filterText();
setState(() {
_textColor1 = Colors.black;
});
},
child: Text(
"All",
style: TextStyle(
color: Colors.black26,
fontSize: 20,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text(
"|",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.all(0),
child: InkWell(
onTap: () {
filterText();
},
child: Text(
"QR Codes",
style: TextStyle(
color: Colors.black26,
fontSize: 20,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text(
"|",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
Padding(
padding: EdgeInsets.all(0),
child: InkWell(
onTap: () {
filterText();
},
child: Text(
"Bar Codes",
style: TextStyle(
color: Colors.black26,
fontSize: 20,
),
),
),
),
],
),
),
);
}
void filterText() {
String filterAllText = "All";
setState(() {
Fluttertoast.showToast(
msg: "$filterAllText",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.blue,
textColor: Colors.white,
fontSize: 14.0);
});
}
}
Réponses
LapaNyAinaTanjona Aug 22 2020 at 14:53
vous pouvez essayer le code ci-dessous:
class _HomeDataState extends State<HomeData> {
Color _textColor1 = Colors.black;
Color _textColor2 = Colors.black26;
bool _isCheckedAll = true;
bool _isCheckedQr = false;
bool _isCheckedBar = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Demo",
style: TextStyle(color: Colors.white),
),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(0),
child: InkWell(
onTap: () {
setState(() {
_isCheckedAll = true;
_isCheckedQr = false;
_isCheckedBar = false;
});
},
child: Text(
"All",
style: TextStyle(
color: _isCheckedAll ? _textColor1 : _textColor2,
fontSize: 20,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text(
"|",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.all(0),
child: InkWell(
onTap: () {
setState(() {
_isCheckedAll = false;
_isCheckedQr = true;
_isCheckedBar = false;
});
},
child: Text(
"QR Codes",
style: TextStyle(
color: _isCheckedQr ? _textColor1 : _textColor2,
fontSize: 20,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text(
"|",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
Padding(
padding: EdgeInsets.all(0),
child: InkWell(
onTap: () {
setState(() {
_isCheckedAll = false;
_isCheckedQr = false;
_isCheckedBar = true;
});
},
child: Text(
"Bar Codes",
style: TextStyle(
color: _isCheckedBar ? _textColor1 : _textColor2,
fontSize: 20,
),
),
),
),
],
),
),
);
}
}