Widget Teks Flutter

Question

Saya memiliki layar sederhana dengan tiga widget teks dan ketika pengguna mengklik salah satu widget teks ini, teks seharusnya berubah menjadi warna teks font hitam dan warna widget teks lainnya tidak boleh berubah. Jadi saya memberikan kode saya di bawah ini dan Bagaimana cara menerapkan pada kode saya sehingga hanya teks yang diklik yang berubah warna.

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

Answer 1

Anda dapat mencoba kode di bawah ini:

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