I am trying to use GoogleTranslator library to translate input text, but i got an error that say type String is not subtype of type Widget
i tried to create a function that receive a text and return the translated text and used the widget on the body of the app
import 'package:flutter/material.dart';
import 'package:translator/translator.dart';
void main() => runApp(MyApp());
Widget translator(String input) {
GoogleTranslator translator = GoogleTranslator();
String translation = translator
.translate("I would buy a car, if I had money.", from: 'en', to: 'ar')
.toString();
return translation as Widget;
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Translator'),
),
body: Center(
child: translator("Hello World"),
),
),
);
}
}
i expect the output to be in translated text in center of the screen
return translation as Widget;
should probably be
return Text(translation);
update
import 'package:flutter/material.dart';
import 'package:translator/translator.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Translator'),
),
body: Center(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _translations = <String,String>{};
String translator(String input) {
if(_translations.containsKey(input)) {
return _translations[input];
} else {
_translate(input);
return input;
}
}
Future<void> _translate(String input) async {
GoogleTranslator translator = GoogleTranslator();
String translation = await translator
.translate("I would buy a car, if I had money.", from: 'en', to: 'ar');
setState(() => _translations[input] = translation);
}
#override
Widget build(BuildContext context) {
return Text(translator("Hello World"));
}
}
Related
I was working with bottom navigation with similar child widgets in which only parameters are changed. The problem only happens when widgets are of StatefulWidget else there is no problem, indications in bottomnavbar is changing but not the body.
Child 1:
Child 2:
Actual result:
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;
Widget body;
#override
void initState() {
// body = getBody(0);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
elevation: 0,
),
body: body,
bottomNavigationBar: BottomNavigationBar(
currentIndex: _counter,
onTap: (index){
_counter = index;
setState(() {
body = getBody(index);
});
},items: [
BottomNavigationBarItem(icon: Icon(Icons.language),title:
Text('HELLO')),
BottomNavigationBarItem(icon: Icon(Icons.security),title:
Text('BYE'))
]),
);
}
Widget getBody(int pos){
if(pos==0){
// return new Mx(category: 'ALPHA',type: '#',);
return new MyTAbs(category: 'ALPHA',type: '#',);
}
else{
// return new Mx(category:'BETA',type: '#',);
return new MyTAbs(category:'BETA',type: '#',);
}
}
}
class Mx extends StatelessWidget{
final String type,category;
Mx({this.type,this.category});
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: getColor(),
body: new Center(
child: Text(category+' '+type),
),
);
}
Color getColor(){
if(category=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
class MyTAbs extends StatefulWidget{
final String type,category;
MyTAbs({this.type,this.category});
Tabs createState() => new Tabs(title: category,type: type);
}
class Tabs extends State<MyTAbs>{
final String title,type;
Tabs({this.title,this.type});
#override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
backgroundColor: getColor(),
appBar: AppBar(
title: Text(title+' '+type),
),
);
}
Color getColor(){
if(title=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
and I can't use statelessWidget because there's a dynamic tab section inside.
Solved this issue by adding new Key as parameter and passed a UniqueKey
like
return new MyTAbs(category: 'ALPHA',type: '#',key: UniqueKey(),);
MyTAbs class
class MyTAbs extends StatefulWidget{
final String type,category;
final Key key;
MyTAbs({#required this.key,this.type,this.category});
Tabs createState() => new Tabs(title: category,type: type,key: key);
}
Tabs class
class Tabs extends State<MyTAbs>{
final String title,type;
final Key key;
Tabs({this.title,this.type,#required this.key});
#override
#override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
backgroundColor: getColor(),
appBar: AppBar(
title: Text(title+' '+type),
),
);
}
Color getColor(){
if(title=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
little about Key
You can use keys to control which widgets the framework matches up with other widgets when a widget rebuilds. By default, the framework matches widgets in the current and previous build according to their runtimeType and the order in which they appear. With keys, the framework requires that the two widgets have the same key as well as the same runtimeType. more in flutter docs
Change your Tabs class
class Tabs extends State<MyTAbs> {
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: getColor(),
appBar: AppBar(
title: Text(widget.category + ' ' + widget.type),
),
);
}
Color getColor() {
if (widget.category == 'ALPHA') {
return Colors.red;
} else {
return Colors.green;
}
}
}
Class State (Tabs) created only once. So after that you can't call constructor with new parameters. But you have access to the widgets' fields
your problem in "MyTAbs" passing parameters class
after edit it , now its work
you dont need to pass the date from "Stateful" class to the "State", just call it with "widget.parameterName" in the state
your code after edit :
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;
Widget body;
#override
void initState() {
// body = getBody(0);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
elevation: 0,
),
body: body,
bottomNavigationBar: BottomNavigationBar(
currentIndex: _counter,
onTap: (index){
_counter = index;
setState(() {
body = getBody(index);
});
},items: [
BottomNavigationBarItem(icon: Icon(Icons.language),title:
Text('HELLO')),
BottomNavigationBarItem(icon: Icon(Icons.security),title:
Text('BYE'))
]),
);
}
Widget getBody(int pos){
if(pos==0){
// return new Mx(category: 'ALPHA',type: '#',);
return new MyTAbs(category: 'ALPHA',type: '#',);
}
else{
// return new Mx(category:'BETA',type: '#',);
return new MyTAbs(category:'BETA',type: '#',);
}
}
}
class Mx extends StatelessWidget{
final String type,category;
Mx({this.type,this.category});
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: getColor(),
body: new Center(
child: Text(category+' '+type),
),
);
}
Color getColor(){
if(category=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
class MyTAbs extends StatefulWidget{
final String type,category;
MyTAbs({this.type,this.category});
Tabs createState() => new Tabs();
}
class Tabs extends State<MyTAbs>{
#override
Widget build(BuildContext context) {
print(widget.type);
// TODO: implement build
return new Scaffold(
backgroundColor: getColor(),
appBar: AppBar(
title: Text(widget.category+' '+widget.type),
),
);
}
Color getColor(){
if(widget.category=='ALPHA'){
return Colors.red;
}
else{
return Colors.green;
}
}
}
If I keep the bottomNotificationBar in the same class as the rest of the page, setState works properly and the buttons work properly.
If I move the bottomNotificationBar to another class, I cannot get the setState to work, because it needs to reference back to the main class. I've tried a few things, but I can't wrap my mind around this yet.
The error is:
The following assertion was thrown while handling a gesture:
setState() called in constructor:
The part that isn't working is marked near the bottom of this:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'My Title',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedPageIndex = 0;
var pages = [ Page1(), Page2(), ];
#override
Widget build(BuildContext context) {
return new Scaffold(
body: pages[selectedPageIndex],
bottomNavigationBar:
MyClass().buildBottomNavigationBar(selectedPageIndex),
);
}
}
class MyClass {
BottomNavigationBar buildBottomNavigationBar(selectedPageIndex) {
return new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text("Page1"),
icon: Icon(Icons.account_circle),
),
BottomNavigationBarItem(
title: Text("Page2"),
icon: Icon(Icons.account_circle),
),
],
onTap: (index) {
/////////////////////////////START OF SECTION///////////////////////////
_MyHomePageState().setState(() {
selectedPageIndex = index;
});
/////////////////////////////END OF SECTION///////////////////////////
},
currentIndex: selectedPageIndex,
);
}
}
--------------EDIT:----------------
Ok, now I have the following code below, and I am getting the following 2 things:
info:
The member 'setState' can only be used within instance members of subclasses of 'package:flutter/src/widgets/framework.dart'.
exception:
The following NoSuchMethodError was thrown while handling a gesture:
The method 'setState' was called on null.
Receiver: null
Tried calling: setState(Closure: () => Null)
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'My Title',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
static void setIndex(BuildContext context, int _newIndex) {
_MyHomePageState state = context.ancestorStateOfType(TypeMatcher<_MyHomePageState>());
state.setState(() {
state.selectedPageIndex =_newIndex;
});
}
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedPageIndex = 0;
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(),
bottomNavigationBar:
MyClass().buildBottomNavigationBar(context,selectedPageIndex),
);
}
}
class MyClass {
BottomNavigationBar buildBottomNavigationBar(context,selectedPageIndex) {
return new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text("Page1"),
icon: Icon(Icons.account_circle),
),
BottomNavigationBarItem(
title: Text("Page2"),
icon: Icon(Icons.account_circle),
),
],
onTap: (index) {
MyHomePage.setIndex(context, index);
},
currentIndex: selectedPageIndex,
);
}
}
What you Require is CallBAck Function from the other class. As setState has to be called on object -_MyHomePageState.
With Class Constructors we pass the initial Data & got a Callback on SetState().
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'My Title',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedPageIndex = 0;
var pages = [
Page1(),
Page2(),
];
#override
Widget build(BuildContext context) {
return new Scaffold(
body: pages[selectedPageIndex],
bottomNavigationBar: MyClass(
selectedPageIndex: selectedPageIndex,
myFunc: _myFunc,
),
);
}
void _myFunc(int index) {
setState(() {
selectedPageIndex = index;
});
}
}
class MyClass extends StatelessWidget {
MyClass({this.selectedPageIndex, this.myFunc});
final int selectedPageIndex;
final Function myFunc;
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text("Page1"),
icon: Icon(Icons.account_circle),
),
BottomNavigationBarItem(
title: Text("Page2"),
icon: Icon(Icons.account_circle),
),
],
onTap: (index) {
/////////////////////////////START OF SECTION///////////////////////////
myFunc(index);
/////////////////////////////END OF SECTION///////////////////////////
},
currentIndex: selectedPageIndex,
);
}
}
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Text('1'),
),
);
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(child: Container(child: Text('3'),));
}
}
You should modify your MyHomePage by adding a static method into it so its state can be called from anywhere:
class MyHomePage extends StatefulWidget {
static void setIndex(BuildContext context, int _newIndex) {
_MyHomePageState state = context.ancestorStateOfType(TypeMatcher<_MyHomePageState>());
state.setState(() {
state.selectedPageIndex =_newIndex;
});
}
#override
_MyHomePageState createState() => new _MyHomePageState();
}
Then when you want to change the index call:
onTap (index) {
MyHomePage.setIndex(context, index);
}
Just testing out flutter. The code sample below is a very simple flutter app. The problem is that I don't know how to call the setState() function inside the TestTextState class in order to change the text each time when the change button is pressed.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Test app',
home: new Scaffold(
appBar: new AppBar(
title: new Text("Test"),
),
body: new Test(),
),
);
}
}
class Test extends StatelessWidget {
final TestText testText = new TestText();
void change() {
testText.text == "original" ? testText.set("changed") : testText.set("original");
}
#override
Widget build(BuildContext context) {
return new Column(
children: [
testText,
new RaisedButton(
child: new Text("change"),
onPressed: () => change(),
),
]
);
}
}
class TestText extends StatefulWidget {
String text = "original";
void set(String str) {
this.text = str;
}
#override
TestTextState createState() => new TestTextState();
}
class TestTextState extends State<TestText> {
#override
Widget build(BuildContext context) {
return new Text(this.widget.text);
}
}
I have approached this problem by initializing the _TestTextState as the final property of the TestText widget which allows to simply update the state when the change button is pressed. It seems like a simple solution but I'm not sure whether it's a good practice.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Test app',
home: new Scaffold(
appBar: new AppBar(
title: new Text("Test"),
),
body: new Test(),
),
);
}
}
class Test extends StatelessWidget {
final _TestText text = new _TestText();
#override
Widget build(BuildContext context) {
return new Column(
children: [
text,
new RaisedButton(
child: new Text("change"),
onPressed: () => text.update(),
),
]
);
}
}
class TestText extends StatefulWidget {
final _TestTextState state = new _TestTextState();
void update() {
state.change();
}
#override
_TestTextState createState() => state;
}
class _TestTextState extends State<TestText> {
String text = "original";
void change() {
setState(() {
this.text = this.text == "original" ? "changed" : "original";
});
}
#override
Widget build(BuildContext context) {
return new Text(this.text);
}
}
thier is no way to do so. any how you have to convert your StatelessWidget to StatefulWidget.
Solution based on your existing code
class Test extends StatelessWidget {
final StreamController<String> streamController = StreamController<String>.broadcast();
#override
Widget build(BuildContext context) {
final TestText testText = TestText(streamController.stream);
return new Column(children: [
testText,
new RaisedButton(
child: Text("change"),
onPressed: () {
String text = testText.text == "original" ? "changed" : "original";
streamController.add(text);
},
),
]);
}
}
class TestText extends StatefulWidget {
TestText(this.stream);
final Stream<String> stream;
String text = "original";
#override
TestTextState createState() => new TestTextState();
}
class TestTextState extends State<TestText> {
#override
void initState() {
widget.stream.listen((str) {
setState(() {
widget.text = str;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Text(widget.text);
}
}
But it's not the best idea - to use non-final field inside Stateful Widget
P.S.
You can also use this - scoped_model
Being new to Flutter, I'm doing a learning exercise by re-creating my existing Android app. However I'm having trouble to produce a 'spinning, growing home icon', which should be animated in sync with the drawer open/close animation.
The desired drawer/home-icon behaviour looks like this:
I made this in Android by implementing
DrawerListener.onDrawerSlide(View drawerView, float slideOffset)
My naive approach to do this in Flutter, is to use a ScaleTransition and a RotationTransition that listen to the same Animation that opens/closes the Drawer.
I can see that ScaffoldState has a DrawerControllerState, but it is private.
final GlobalKey<DrawerControllerState> _drawerKey = new GlobalKey<DrawerControllerState>();
And even if I could somehow access the DrawerControllerState (which I don't know how), I then couldn't access _animationChanged() and _controller because both are private members of DrawerControllerState.
I feel that I'm coming at this in the wrong way, and that there is an better approach that's more natural to Flutter, that I'm unable to see.
Please can anyone describe the Flutter way of implementing this?
You can first refer to other people's replies on stackoverflow here
My solve:
get Drawer status on DrawerWidget
initState() : open drawer
dispose() : close drawer
Stream drawer status by DrawerService Provider
see full code
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:provider/provider.dart';
void main() {
runApp(
MultiProvider(
providers: [
Provider(create: (_) => DrawerService()),
],
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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> {
DrawerService _drawerService;
String drawerStatus = 'close';
#override
void initState() {
super.initState();
_drawerService = Provider.of(context, listen: false);
_listenDrawerService();
}
_listenDrawerService() {
_drawerService.status.listen((status) {
if(status) {
drawerStatus = 'open';
} else {
drawerStatus = 'close';
}
setState(() { });
});
}
#override
Widget build(BuildContext context) {
Color bgColor = Colors.yellow;
if(drawerStatus == 'open') {
bgColor = Colors.red;
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
drawer: DrawerWidget(),
body: Container(
decoration: BoxDecoration(color: bgColor),
height: 300,
child: Center(child: Text(drawerStatus),),
),
);
}
}
class DrawerWidget extends StatefulWidget {
#override
_DrawerWidgetState createState() => _DrawerWidgetState();
}
class _DrawerWidgetState extends State<DrawerWidget> {
DrawerService _drawerService;
#override
void initState() {
super.initState();
_drawerService = Provider.of(context, listen: false);
_drawerService.setIsOpenStatus(true);
}
#override
Widget build(BuildContext context) {
return Drawer(
child: Center(child: Text('drawer'),),
);
}
#override
void dispose() {
super.dispose();
_drawerService.setIsOpenStatus(false);
}
}
class DrawerService {
StreamController<bool> _statusController = StreamController.broadcast();
Stream<bool> get status => _statusController.stream;
setIsOpenStatus(bool openStatus) {
_statusController.add(openStatus);
}
}
hope to help some body
I want to access _data from main() async to Stateful Widget? Is it good practice to call REST Api Call in Main()?
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter/material.dart';
Future main() async {
List _data = await makeRequest();
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
Future<List> makeRequest() async {
String url = "https://jsonplaceholder.typicode.com/posts";
http.Response response = await http.get(url);
print(json.decode(response.body));
return json.decode(response.body);
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("JSON List"),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
ListTile(
);
}
),
);
}
}
This is how it should works, I fixed your code :
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _data = new List();
void makeRequest() async {
String url = "https://jsonplaceholder.typicode.com/posts";
http.Response response = await http.get(url);
print(json.decode(response.body));
setState(() {
_data = json.decode(response.body) as List;
});
}
#override
void initState() {
makeRequest();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("JSON List"),
),
body: _data.isEmpty
? Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: _data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(_data[index]['title']),
);
}),
);
}
}
your main call should be
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}