Flutter: Update String in other statefull widget - flutter

Question

I'm using a statefull widget to handle the length of my text. (show more, show less)
class DescriptionTextWidget extends StatefulWidget {
final String text;
DescriptionTextWidget({#required this.text});
#override
_DescriptionTextWidgetState createState() =>
new _DescriptionTextWidgetState();
}
class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
String firstHalf;
String secondHalf;
bool flag = true;
#override
void initState() {
super.initState();
if (widget.text.length > 400) {
firstHalf = widget.text.substring(0, 400);
secondHalf = widget.text.substring(400, widget.text.length);
} else {
firstHalf = widget.text;
secondHalf = "";
}
}
#override
Widget build(BuildContext context) {
return new Container(
padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: secondHalf.isEmpty
? new Text(firstHalf, style: TextStyle(color: Colors.white))
: new Column(
children: <Widget>[
new Text(
flag ? (firstHalf + "...") : (firstHalf + secondHalf),
style: TextStyle(color: Colors.white),
),
new InkWell(
splashColor: Colors.transparent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text(
flag ? "show more" : "show less",
style:
new TextStyle(color: Colors.white.withOpacity(0.8)),
),
],
),
onTap: () {
setState(() {
flag = !flag;
});
},
),
],
),
);
}
}
In my main class: I 'give' the text to that stfull widget like this:
GestureDetector(
onTap: () async {
},
child: DescriptionTextWidget(
text: myString,
),
If I update myString in my main statefull widget, the String doesn't get updated in the statefull widget 'DescriptionTextWidget'.
What's the best way to update the String in the class DescriptionTextWidget?
Thanks in advance!

Answer 1

Sample on DartPad
class DescriptionTextWidget extends StatefulWidget {
final ValueNotifier<String> text;
}
class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
#override
void initState() {
super.initState();
widget.text.addListener(() => setState(initText));
initText();
}
initText() {
if (widget.text.value.length > 400) {
firstHalf = widget.text.value.substring(0, 400);
secondHalf = widget.text.value.substring(400, widget.text.value.length);
} else {
firstHalf = widget.text.value;
secondHalf = "";
}
}
}
main class:
ValueNotifier<String> myString;
updateString(String value){
myString.value = value;
}

Answer 2

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
List<String> myString = ["test"];
void _replace() {
setState(() {
myString[0] = "tapped";
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: DescriptionTextWidget(
text: myString,
),
),
floatingActionButton: FloatingActionButton(
onPressed: _replace,
child: Icon(Icons.autorenew),
),
);
}
}
class DescriptionTextWidget extends StatefulWidget {
final List<String> text;
DescriptionTextWidget({#required this.text});
#override
_DescriptionTextWidgetState createState() =>
new _DescriptionTextWidgetState();
}
class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
bool flag = true;
#override
Widget build(BuildContext context) {
String firstHalf;
String secondHalf;
if (widget.text[0].length > 400) {
firstHalf = widget.text[0].substring(0, 400);
secondHalf = widget.text[0].substring(400, widget.text[0].length);
} else {
firstHalf = widget.text[0];
secondHalf = "";
}
return new Container(
padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: secondHalf.isEmpty
? new Text(firstHalf, style: TextStyle(color: Colors.black))
: new Column(
children: <Widget>[
new Text(
flag ? (firstHalf + "...") : (firstHalf + secondHalf),
style: TextStyle(color: Colors.black),
),
new InkWell(
splashColor: Colors.transparent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text(
flag ? "show more" : "show less",
style:
new TextStyle(color: Colors.black.withOpacity(0.8)),
),
],
),
onTap: () {
setState(() {
flag = !flag;
});
},
),
],
),
);
}
}