Widget Flutter Text
Aug 22 2020
Tengo una pantalla simple con tres widgets de texto y cuando el usuario hace clic en uno de estos widgets de texto, el texto debe volverse negro, el color del texto de la fuente y el otro color del widget de texto no debe cambiar. Así que proporciono mi código a continuación y ¿Cómo puedo implementarlo? en mi código para que solo el texto en el que se haga clic cambie de color.
Archivo 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);
});
}
}
Respuestas
LapaNyAinaTanjona Aug 22 2020 at 14:53
puedes probar el siguiente código:
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,
),
),
),
),
],
),
),
);
}
}