I would like to have 3 different text fields with a menu at the bottom of the screen allowing the user to customize each one separately. I have created 3 text editing controllers but need a way of changing the format of which ever text field is currently active, any thoughts? Here is my code...
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(),
),
],
),
],
),
),
);
}
}
At the moment I can create separate text values, but when I select, for example, a font size using the bottom menu, all 3 values change when I would only like the value assigned the active text editing controller to change. Thanks.
Try this?
Use ListView