Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
733 views
in Technique[技术] by (71.8m points)

database - Reflect List Data Back Into UI [Flutter]

In short, users can choose their interests during onboarding, UI changes and the interests are added to a list.

When user navigates to another page ie settings, how can the chosen interests be selected alrdy (bool isChosen = true)?... and then users can update their interests from there again?

any guidance is appreciated, thanks!

User chosen interests

Attached is my truncated code for a particular theme of interests, all the themes have the same code just different list.

Let's say my data has a list of [ "?? Home-body", "???♀? Running", "?????♀? Yoga", "?? Theaters", "?? Anime & Manga",].

What can be done so that the bubble UI of this chosen list is shown as bool isChosen (so yellow color, compared to the other dark ones)? Following which users can select and unselect again?

final List<String> artsInterests = [
  blah blah blah
];


class ArtsInterests extends StatelessWidget {
  const ArtsInterests({
    Key key,
    @required this.artsInterests,
  }) : super(key: key);

  final List<String> artsInterests;

  @override
  Widget build(BuildContext context) {
final height = MediaQuery.size.height;
final width = MediaQuery.size.width;

    return Column(children: [
      Container(
        margin: EdgeInsets.only(
            left: width * 0.045,
            top: height * 0.033),
        child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              '?? Arts',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21),
            )),
      ),
      Column(
        children: [
          Padding(
            padding: EdgeInsets.only(
                left: width * 0.03,
                top: height * 0.012),
            child: Container(
              width: width,
              height: height * 0.045,
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.all(1),
                  itemCount: 7,
                  itemBuilder: (context, int index) {
                    return Interests2(AvailableInterestChosen(
                      artsInterests[index],
                      isChosen: false,
                    ));
                  }),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
                left: width * 0.03,
                top: height * 0.003),
            child: Container(
              width: width,
              height: height * 0.045,
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.all(1),
                  itemCount: artsInterests.length - 7,
                  itemBuilder: (context, int index) {
                    return Interests2(AvailableInterestChosen(
                      artsInterests[7 + index],
                      isChosen: false,
                    ));
                  }),
            ),
          ),
        ],
      ),
    ]);
  }
}

List<String> chosenInterests = [ "?? Home-body",  "???♀? Running", "?????♀? Yoga",  "?? Theaters",  "?? Anime & Manga",];

List<String> chosenArtsInterests = [];

class Interests2 extends StatefulWidget {
  final AvailableInterestChosen viewInterest;

  Interests2(this.viewInterest);

  String id = 'Interests2';

  @override
  Interests2State createState() => Interests2State();
}

class Interests2State extends State<Interests2> {
  @override
  Widget build(BuildContext context) {
final height = MediaQuery.size.height;
final width = MediaQuery.size.width;
    Container container = Container(
        height: height * 0.03,
        padding: EdgeInsets.symmetric(
            horizontal: width * 0.027,
            vertical:height * 0.003),
        // padding: EdgeInsets.fromLTRB(12, 6, 12, 6),
        margin: EdgeInsets.fromLTRB(
          width * 0.012,
          height * 0.003,
          width * 0.012,
          height * 0.003),
        decoration: BoxDecoration(
          color: widget.viewInterest.isChosen && chosenInterests.length < 9
              ? Color(0xff0B84FE)
              : Colors.white.withOpacity(0.87),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.69),
              spreadRadius: 1,
              blurRadius: 3,
              offset: Offset(0, 1), // changes position of shadow
            ),
          ],
          borderRadius: BorderRadius.circular(9),
        ),
        child: Text(
          '${widget.viewInterest.title}',
          style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w600,
              color: widget.viewInterest.isChosen && chosenInterests.length < 9
                  ? Colors.white
                  : Colors.black),
        ));

    if (widget.viewInterest.isChosen && chosenInterests.length < 9) {
      chosenArtsInterests.add('${widget.viewInterest.title}');
      var chosenInterests = chosenSportsInterests +
          chosenEntertainmentInterests +
          chosenCharacterInterests +
          chosenArtsInterests +
          chosenWellnessInterests +
          chosenLanguageInterests;

      print(chosenInterests);
    } else {
      chosenArtsInterests.remove('${widget.viewInterest.title}');
      var chosenInterests = chosenSportsInterests +
          chosenEntertainmentInterests +
          chosenCharacterInterests +
          chosenArtsInterests +
          chosenWellnessInterests +
          chosenLanguageInterests;

      print(chosenInterests);
    }
    return GestureDetector(
      onTap: () {
        setState(() {
          widget.viewInterest.isChosen = !widget.viewInterest.isChosen;
        });
      },
      child: container,
    );
  }
}

class AvailableInterestChosen {
  bool isChosen;
  String title;

  AvailableInterestChosen(this.title, {this.isChosen = false});
}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can pass the values to another widget as arguments but that is not possible in this case since there are so many values. You have to use a state management solution. For starter you can use provider


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...