Flutter Metin Widget'ı

Question

Üç metin parçacığına sahip basit bir ekranım var ve kullanıcı bu metin parçacığına tıkladığında metnin siyah yazı tipi metin rengine dönmesi ve diğer metin parçacığı renginin değişmemesi gerekir. Bu nedenle aşağıda kodumu veriyorum ve Nasıl uygulayabilirim kodumda, yalnızca tıklanan metnin renk değiştirmesi için.

Main.Dart dosyası

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);
    });
  }
}

Answer 1

aşağıdaki kodu deneyebilirsiniz:

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,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}