Im a beginner in flutter and i need some help in figuring what went wrong with my code here
i am trying to make the floating action button display a simple dialog (and add content) but i am unsure why i am unable to bring the simple dialog out when i press the FAB.I am aware that it has to be within the stateless widget but i cant seem to insert the FAB within the stateless/stateful widget segment.Is there a work-around for this?
Any help would be greatly appreciated.
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
bottomNavigationBar: BottomAppBar(
child: Text(
"test bottom",
style: TextStyle(
color: Color(0xffFFFFFF),
fontSize: 10,
),
textAlign: TextAlign.center,
),
color: Colors.blueGrey[600],
),
backgroundColor: Colors.lightBlueAccent[50],
appBar: AppBar(
title: Text('test'),
backgroundColor: Colors.blueGrey[600],
),
body: SoundTest(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
child: Icon(Icons.priority_high),
onPressed: () {
print('hello');
},
),
),
));
}
class SoundTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: FlatButton(
child: Image.asset('images/softsound.png'),
onPressed: () {
final player = AudioCache();
player.play('clicksoft.wav');
showDialog(context: context,
);
},
),
),
Expanded(
child: FlatButton(
child: Image.asset('images/loudsound.png'),
onPressed: () {
final player = AudioCache();
player.play('clickloud.wav');
}),
)
],
);
}
}
Take a StatefulWidget
,
Complete example, Find Complete Code here
class Login extends StatefulWidget {
Login({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<Login> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButton: FloatingActionButton(onPressed: (){_showDialog();}),
);
}
void _showDialog() {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
}
Declare a _scaffoldKey
var _scaffoldKey = new GlobalKey<ScaffoldState>();
assign _scaffoldkey
to your Scaffold
,
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: Container(),
floatingActionButton: FloatingActionButton(onPressed: (){_showDialog();}),
);
}
then pass _scaffoldKey.currentContext
to dialog's like this context:_scaffoldKey.currentContext,
void _showDialog() {
// flutter defined function
showDialog(
context: _scaffoldKey.currentContext,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
Output:
Basically Ravinder Kumar is right. Because you seem new to flutter, I've made an easy to understand example based on the sample code generated when a new project is created. So my advise would be to generate a new project and paste my code, in order to see how you need to modify your app. I would recommend using a StatefulWidget
, as I did.
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> {
void _showDialog() {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Push the FAB to display a dialog.',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _showDialog,
tooltip: 'Show Dialog',
child: Icon(Icons.add),
),
);
}
}
EDIT: I took your code and inserted a dialog in the fab...
import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomAppBar(
child: Text(
"test bottom",
style: TextStyle(
color: Color(0xffFFFFFF),
fontSize: 10,
),
textAlign: TextAlign.center,
),
color: Colors.blueGrey[600],
),
backgroundColor: Colors.lightBlueAccent[50],
appBar: AppBar(
title: Text('test'),
backgroundColor: Colors.blueGrey[600],
),
body: SoundTest(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blue,
child: Icon(Icons.priority_high),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
);
}
}
class SoundTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: FlatButton(
child: Image.asset('images/softsound.png'),
onPressed: () {
final player = AudioCache();
player.play('clicksoft.wav');
//I do not know what this is supposed to do...
//If you want to show the dialog here, simply copy/paste from above...
/*showDialog(context: context,
);*/
},
),
),
Expanded(
child: FlatButton(
child: Image.asset('images/loudsound.png'),
onPressed: () {
final player = AudioCache();
player.play('clickloud.wav');
}),
)
],
);
}
}
User contributions licensed under CC BY-SA 3.0