How to Turn Some Functions to an Independent Widget in Flutter? - flutter

Question

I need to turn these two functions : _collectKeywords and _matchKeywords into a Widget, so I can reuse them another time. I have tried it, but I don't know how and where to instatiate the a widget that only processes data without returning any value. Can somebody help me?
//please don't mind the UI, button's color, etc
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttermatchcard/cardButton.dart';
class MainMenu extends StatelessWidget {
void _accessCardMatcher(String butKeyword)
{
_collectKeywords(butKeyword);
}
//================================================
String _keyword_1;
String _keyword_2;
void _collectKeywords(String _keyword_now){
if(_keyword_1==null)
{
_keyword_1=_keyword_now;
}
else{
_keyword_2=_keyword_now;
_matchKeyword(_keyword_1,_keyword_2);
}
}
void _matchKeyword(_keyWord_one, _keyWord_two){
if(_keyWord_one==_keyWord_two){
//Lock the But
print("MATCH!!!!");
}
_keyword_1=null;
_keyword_1=null;
}
//================================================
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
//textBaseline: ,
children: <Widget>[
Container(
child: Text("Match Card", style: TextStyle(
fontSize: 50,
color: Colors.amber,
fontFamily: "FreeHand"
),
),
),
Icon( Icons.filter_none,
color: Colors.amber,
size: 40,
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//But Start
CardButton(
onTapExecute:_accessCardMatcher,
keyword: "start",
text: Text("STA", style: TextStyle(
fontSize: 20,
),),
alignment: Alignment.centerRight,
),
//But Start2
CardButton(
onTapExecute:_accessCardMatcher,
keyword: "start",
text: Text("RT", style: TextStyle(
fontSize: 20,
),),
alignment: Alignment.centerLeft,
),
SizedBox(
width: 10,
),
//But Option
CardButton(
onTapExecute:_accessCardMatcher,
keyword: "option",
text: Text("OPT", style: TextStyle(
fontSize: 20,
),),
alignment: Alignment.centerRight,
),
CardButton(
onTapExecute:_accessCardMatcher,
keyword: "option",
text: Text("ION", style: TextStyle(
fontSize: 20,
),),
alignment: Alignment.centerLeft,
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//But
CardButton(
onTapExecute:_accessCardMatcher,
keyword: "credit",
text: Text("CRE", style: TextStyle(
fontSize: 20,
),),
alignment: Alignment.centerRight,
),
CardButton(
onTapExecute:_accessCardMatcher,
keyword: "credit",
text: Text("DIT", style: TextStyle(
fontSize: 20,
),),
alignment: Alignment.centerLeft,
),
],
)
],
)
);
}
}

Answer 1

Its a sample, Modify as your requirement !
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
int buttonCount = 0;
String textYouWantToModify = '';
TextEditingController te;
CommonMethods methods = CommonMethods();
#override
void initState() {
super.initState();
te = TextEditingController();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: Text('Title')),
body: Container(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
//Other widgets like TextFiled to save text......or whatever
TextField(
controller: te,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Type something 1',
labelStyle: TextStyle(color: Colors.black)),
style: TextStyle(color: Colors.black)
),
RaisedButton(
color: Colors.black,
onPressed: () {
setState(() {
buttonCount++;
if (buttonCount == 2) {
methods.method1(te.text);
methods.method2();
}
});
},
child:
Text('Button 1', style: TextStyle(color: Colors.white))),
RaisedButton(
onPressed: () {
setState(() {
buttonCount++;
if (buttonCount == 2) {
methods.method1(te.text);
methods.method2();
}
});
},
child:
Text('Button 2', style: TextStyle(color: Colors.black))),
//Other widgets.....
]))));
}
}
class CommonMethods {
void method1(String s) {
//your code.....
print(s);
}
void method2() {
//your code.....
}
}