Flutter-如何格式化单个文本字段

Question

我想要3个不同的文本字段，在屏幕底部有一个菜单，允许用户分别自定义每个字段。我已经创建了3个文本编辑控制器，但需要一种方法来更改当前活动的文本字段的格式，有什么想法吗？这是我的密码。。。

class InsideRight extends StatefulWidget {
const InsideRight({
@required this.message,
Key key
}) : super(key: key);


final String message;

@override
_InsideRightState createState() => _InsideRightState(message: this.message);
}
class _InsideRightState extends State<InsideRight> {
String message;
_InsideRightState({
@required this.message,
});

List<ColorModel> _colors = [
ColorModel(color: Colors.black, colorName: 'Black'),
ColorModel(color: Colors.blue, colorName: "Blue"),
ColorModel(color: Colors.purple, colorName: "Purple"),
ColorModel(color: Colors.pink, colorName: "Pink"),
ColorModel(color: Colors.teal, colorName: "Teal"),
ColorModel(color: Colors.amber, colorName: "Amber"),
ColorModel(color: Colors.brown, colorName: "Brown"),
];
List<UserFontModel> _fonts = [
UserFontModel(fontFamily: 'Regular', fontWeight: FontWeight.w400),
UserFontModel(fontFamily: 'Bold', fontWeight: FontWeight.w700),
UserFontModel(fontFamily: 'Medium', fontWeight: FontWeight.w500),
UserFontModel(fontFamily: 'Light', fontWeight: FontWeight.w300),
UserFontModel(fontFamily: 'Thin', fontWeight: FontWeight.w100),
];

final topLineController = TextEditingController(
);
final middleLineController = TextEditingController(
);
final bottomLineController = TextEditingController(
);

@override
void dispose() {
// Clean up the controller when the widget is disposed.
topLineController.dispose();
super.dispose();
}
var fontSize = 12.0;
Color _selectedColor;
String _selectedFontStyle;
FontWeight fontWeight = FontWeight.w400;
@override
Widget build(BuildContext context) {
try {
fontWeight = _fonts.where((font) => font.fontFamily == _selectedFontStyle).toList()[0].fontWeight;
} catch(e){
fontWeight = fontWeight;
};
return Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black26),
),
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: new InputDecoration.collapsed(
hintStyle: TextStyle(fontFamily: FontNameDefault),
hintText: ''),
keyboardType: TextInputType.multiline,
maxLines: null,
controller: topLineController,
style: TextStyle(fontSize: fontSize, color: _selectedColor
, fontWeight: fontWeight),
onChanged:  (String _) {
setState(() {
print(_);
message = _;
});
},
),
)),
SizedBox(height:25),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black26),
),
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.4,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: new InputDecoration.collapsed(
hintStyle: TextStyle(fontFamily: FontNameDefault),
hintText: ''),
keyboardType: TextInputType.multiline,
maxLines: null,
controller: middleLineController,
style: TextStyle(fontSize: fontSize, color: _selectedColor
, fontWeight: fontWeight),
onChanged:  (String _) {
setState(() {
print(_);
message = _;
});
},
),
)),
SizedBox(height:25),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black26),
),
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: new InputDecoration.collapsed(
hintStyle: TextStyle(fontFamily: FontNameDefault),
hintText: ''),
keyboardType: TextInputType.multiline,
maxLines: null,
controller: bottomLineController,
style: TextStyle(fontSize: fontSize, color: _selectedColor
, fontWeight: fontWeight),
onChanged:  (String _) {
setState(() {
print(_);
message = _;
});
},
),
)),
SizedBox(height:20),
Row(
children: [
new DropdownButton<String>(
hint: Text('Size'),
items: new List<double>.generate(72, (i) => i + 2.0).map((double value) {
return new DropdownMenuItem<String>(
value: value.toString(),
child: new Text(value.toString()),
);
}).toList(),
onChanged: (String _) {
setState(() {
fontSize = double.parse(_);
});
},
),
SizedBox(width: 10,),
DropdownButton<Color>(
value: _selectedColor,
items: _colors
.map((color) => DropdownMenuItem<Color>(
child: Container(
width: MediaQuery.of(context).size.width * 0.2,
color: color.color,
child: Text('')),
value: color.color,
))
.toList(),
hint: Text('Color'),
onChanged: (Color value) {
setState(() => _selectedColor = value);
},
),
SizedBox(width: 10,),
DropdownButton<String>(
hint: Text("Style"),
value: _selectedFontStyle,
onChanged: (String value) {
setState(() {
_selectedFontStyle = value;
});
},
items: _fonts.map((fonts) {
return  DropdownMenuItem<String>(
value: fonts.fontFamily,
child: new Container(
width: MediaQuery.of(context).size.width * 0.2,
child: Text(fonts.fontFamily, style: TextStyle(fontWeight: fonts.fontWeight),),
)
);
}).toList(),
),
],
),
],
),
),
);
}
}

目前，我可以创建单独的文本值，但当我使用底部菜单选择字体大小时，当我只想更改分配给活动文本编辑控制器的值时，所有3个值都会更改。谢谢

Answer 1

试试这个？

使用ListView

index==_selectedIndex?selectedFontSize:unselectedFontSize