Flattern Text Widget
Aug 22 2020
Ich habe einen einfachen Bildschirm mit drei Text-Widgets und wenn der Benutzer auf eines dieser Text-Widgets klickt, sollte dieser Text eine schwarze Schriftfarbe annehmen und die andere Text-Widget-Farbe sollte sich nicht ändern. Daher gebe ich meinen Code unten an und wie kann ich implementieren auf meinem Code, so dass nur der angeklickte Text die Farbe ändert.
Main.Dart Datei
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);
});
}
}
Antworten
LapaNyAinaTanjona Aug 22 2020 at 14:53
Sie können den folgenden Code ausprobieren:
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,
),
),
),
),
],
),
),
);
}
}