I want to call initState of each NavigationBarItem when selectedIndex of the BottomNavigationBar changes. How can I implement it? Right now, their initState are only launched when the main page which contains the BottomNavigationBar is initialized. Can I add something on the onTap function to do this? If I can, what would it be?
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_HomeState createState() => new _HomeState();
}
class _HomeState extends State<MyApp> {
int _selectedPage = 0;
final _pageOptions = [
new Page1(),
new Page2(),
new Page3(),
];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: _pageOptions[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedPage,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(
"Page 1",
style: TextStyle(
color: Color(0xFF282858),
fontFamily: "Poppins-Medium",
height: 1),
),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.location_on,
color: Color(0xFF282858),
),
title: Text(
"Page 2",
style: TextStyle(
color: Color(0xFF282858),
height: 1),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.supervised_user_circle,
color: Color(0xFF282858),
),
title: Text(
"Page 3",
style: TextStyle(
color: Color(0xFF282858),
height: 1),
)),
],
),
),
);
}
}
class Page1 extends StatefulWidget {
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
#override
void initState() {
// TODO: implement initState
print('This is page 1');
}
#override
Widget build(BuildContext context) {
return Container();
}
}
class Page2 extends StatefulWidget {
#override
_Page2State createState() => _Page2State();
}
class _Page2State extends State<Page2> {
#override
void initState() {
// TODO: implement initState
print('This is page 2');
}
#override
Widget build(BuildContext context) {
return Container();
}
}
class Page3 extends StatefulWidget {
#override
_Page3State createState() => _Page3State();
}
class _Page3State extends State<Page3> {
#override
void initState() {
// TODO: implement initState
print('This is page 3');
}
#override
Widget build(BuildContext context) {
return Container();
}
}
check out this code
Related
I'm having this issue while creating a splash screen in flutter. I looked for an answer but no one solve the matter or answer perfectly.
Cannot resolve symbol '#android:color/black'
Create StateFulWidget
Add one Future.delayed() to initstate.
#override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 3), () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SecondScreen(),
),
);
});
}
Duration(seconds:3) will wait for 3 seconds on the splash screen then it will redirect to SecondScreen.
the code should be like this
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
#override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 3), () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SecondScreen(),
),
);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: const Center(child: Text("Splash Screen")),
),
);
}
}
the whole code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SplashScreen(),
);
}
}
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
#override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 3), () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SecondScreen(),
),
);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: const Center(child: Text("Splash Screen")),
),
);
}
}
class SecondScreen extends StatefulWidget {
const SecondScreen({super.key});
#override
State<SecondScreen> createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.green,
child: const Center(
child: Text("Home Screen"),
),
),
);
}
}
If it was useful, you can choose it as an approved answer and give points. Good coding.
Try using this,
<item android:background="#android:color/white" />
When it comes to drawable you should assign XMLs or images in your drawable or mipmap resource
In my flutter project I made a floating button that help to auto scroll to the top of the page with one click, and when it reach the top it disappear. It work perfectly. But my problem is that I need to double click in it so it can disappear I want it to automatically disappear if it reach the top. Any help is highly appreciated.
void scrollToTop(){
_controller.runJavascript("window.scrollTo({top: 0, behavior: 'smooth'});");
floatingButtonVisibility();
}
void floatingButtonVisibility() async {
int y = await _controller.getScrollY();
if(y>50){
setState(() {
buttonshow = true;
});
}else {
setState(() {
buttonshow = false;
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView'),
),
body: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
gestureRecognizers: Set()
..add(
Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer()
..onDown = (tap) {
floatingButtonVisibility();
}))
),
floatingActionButton: Visibility(
visible: buttonshow,
child: FloatingActionButton(
onPressed: () {
scrollToTop();
},
backgroundColor: Colors.blue,
child: const Icon(Icons.navigation),
),
),
);
}
}
Here is my solution.
Register 'window.onscroll' in to send webview's scroll position to outside of Webview widget.
Register receiver to receive event from webview.
If scroll is 0, change 'buttonshow' value and rebuild widget.
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(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> {
WebViewController _controller;
bool buttonshow = false;
#override
void initState() {
super.initState();
}
void scrollToTop() {
_controller.evaluateJavascript(
"window.onscroll = function () {scrollEventChannel.postMessage(window.scrollY)};");
_controller
.evaluateJavascript("window.scrollTo({top: 0, behavior: 'smooth'});");
floatingButtonVisibility();
}
void floatingButtonVisibility() async {
int y = await _controller.getScrollY();
if (y > 50) {
setState(() {
buttonshow = true;
});
} else {
setState(() {
buttonshow = false;
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView'),
),
body: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
javascriptChannels: {
JavascriptChannel(
name: 'scrollEventChannel',
onMessageReceived: (JavascriptMessage message) {
print('>>>>: ${message.message}');
if (message.message == '0') {
setState(() {
buttonshow = false;
});
}
}),
},
gestureRecognizers: Set()
..add(Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer()
..onDown = (tap) {
floatingButtonVisibility();
}))),
floatingActionButton: Visibility(
visible: buttonshow,
child: FloatingActionButton(
onPressed: () {
scrollToTop();
},
backgroundColor: Colors.blue,
child: const Icon(Icons.navigation),
),
),
);
}
}
I changed button show trigger from gestureRecognizers to postion event.
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(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> {
WebViewController _controller;
bool buttonshow = false;
#override
void initState() {
super.initState();
}
void scrollToTop() {
_controller
.evaluateJavascript("window.scrollTo({top: 0, behavior: 'smooth'});");
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView'),
),
body: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
onPageFinished: (String url) async {
_controller.evaluateJavascript(
"window.onscroll = function () {scrollEventChannel.postMessage(window.scrollY)};");
},
javascriptChannels: {
JavascriptChannel(
name: 'scrollEventChannel',
onMessageReceived: (JavascriptMessage message) {
print('>>>>: ${message.message}');
int position = int.parse(message.message);
if (position == 0) {
setState(() {
buttonshow = false;
});
} else if (position > 60) {
setState(() {
buttonshow = true;
});
}
}),
},
),
floatingActionButton: Visibility(
visible: buttonshow,
child: FloatingActionButton(
onPressed: () {
scrollToTop();
},
backgroundColor: Colors.blue,
child: const Icon(Icons.navigation),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Home()
);
}
}
class Home extends StatefulWidget {
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
ScrollController scrollController = ScrollController();
bool showbtn = false;
List<String> countries = ["USA", "United Kingdom", "China", "Russia", "Brazil",
"India", "Pakistan", "Nepal", "Bangladesh", "Sri Lanka",
"Japan", "South Korea", "Mongolia"];
#override
void initState() {
scrollController.addListener(() { //scroll listener
double showoffset = 10.0; //Back to top botton will show on scroll offset 10.0
if(scrollController.offset > showoffset){
showbtn = true;
setState(() {
//update state
});
}else{
showbtn = false;
setState(() {
//update state
});
}
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Scroll Back to Top Button"),
backgroundColor: Colors.redAccent
),
floatingActionButton: AnimatedOpacity(
duration: Duration(milliseconds: 1000), //show/hide animation
opacity: showbtn?1.0:0.0, //set obacity to 1 on visible, or hide
child: FloatingActionButton(
onPressed: () {
scrollController.animateTo( //go to top of scroll
0, //scroll offset to go
duration: Duration(milliseconds: 500), //duration of scroll
curve:Curves.fastOutSlowIn //scroll type
);
},
child: Icon(Icons.arrow_upward),
backgroundColor: Colors.redAccent,
),
),
body: SingleChildScrollView(
controller: scrollController, //set controller
child:Container(
child:Column(
children: countries.map((country){
return Card(
child:ListTile(
title: Text(country)
)
);
}).toList(),
)
)
)
);
}
In my program I put the add button to create stateful box with stateful drop down button inside of it, each time I add the box I add it to Map<int, Widget> and pass it to the column. When I click on the cross button it delete the widget from the map in parent. But when I click on cross button on the widget, it show wrong colour of the box and wrong drop down value.Watch the GIF I posted to get the overview of the problem
Link to dart pad to run the example : dart pad code link here
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
#override
_StateMyWidget createState() => _StateMyWidget();
}
class _StateMyWidget extends State<MyWidget> {
Map<int, Widget> widgetList = {};
int boxCount = 0;
#override
initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return ListView(children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: widgetList.values.toList()),
TextButton(
onPressed: () {
widgetList[boxCount] =
new MyBox(boxIndex: boxCount, deleteFunction: deleteBox);
setState(() {});
boxCount += 1;
},
child: Text("Add"))
],
)
]);
}
deleteBox(boxIndex) {
widgetList.remove(boxIndex);
setState(() {});
}
}
class MyBox extends StatefulWidget {
final int boxIndex;
final Function deleteFunction;
MyBox({required this.boxIndex, required this.deleteFunction});
_StateMyBox createState() => _StateMyBox();
}
class _StateMyBox extends State<MyBox> {
var containerColor;
#override
initState() {
super.initState();
containerColor =
Colors.primaries[Random().nextInt(Colors.primaries.length)];
}
#override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 200,
margin: EdgeInsets.all(17),
padding: EdgeInsets.all(10),
color: containerColor,
child: Column(children: [
Row(children: [
Text("Box Number: ${widget.boxIndex}"),
Spacer(),
IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
widget.deleteFunction(widget.boxIndex);
},
),
]),
RegistrationDropdown(listData: ['One', 'Two', 'Three', 'Four']),
]));
}
}
class RegistrationDropdown extends StatefulWidget {
final List<String> listData;
RegistrationDropdown({
required this.listData,
});
#override
_StateRegistrationDropdown createState() {
return _StateRegistrationDropdown();
}
}
class _StateRegistrationDropdown extends State<RegistrationDropdown> {
String dropdownValue = 'One';
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.only(left: 10, right: 10),
child: DropdownButton<String>(
isExpanded: true,
underline: SizedBox(),
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
onChanged: (String? newValue) {
print("Previous dropdown value $dropdownValue");
print("New value $newValue");
setState(() {
dropdownValue = newValue!;
});
},
items: widget.listData.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
));
}
}
The solution is a Key of the widget. The When to Use Keys: Flutter Youtube will be helpful.
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
#override
_StateMyWidget createState() => _StateMyWidget();
}
class _StateMyWidget extends State<MyWidget> {
Map<int, Widget> widgetList = {};
int boxCount = 0;
#override
initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return ListView(
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: widgetList.values.toList(),
),
TextButton(
onPressed: () {
widgetList[boxCount] = new MyBox(
key: UniqueKey(), // <---------------------
boxIndex: boxCount,
deleteFunction: deleteBox,
);
setState(() {});
boxCount += 1;
},
child: Text("Add"),
)
],
)
],
);
}
deleteBox(boxIndex) {
widgetList.remove(boxIndex);
setState(() {});
}
}
class MyBox extends StatefulWidget {
final int boxIndex;
final Function deleteFunction;
MyBox({
Key? key, // <---------------------
required this.boxIndex,
required this.deleteFunction,
}) : super(key: key); // <---------------------
_StateMyBox createState() => _StateMyBox();
}
class _StateMyBox extends State<MyBox> {
var containerColor;
#override
initState() {
super.initState();
containerColor =
Colors.primaries[Random().nextInt(Colors.primaries.length)];
}
#override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 200,
margin: EdgeInsets.all(17),
padding: EdgeInsets.all(10),
color: containerColor,
child: Column(children: [
Row(children: [
Text("Box Number: ${widget.boxIndex}"),
Spacer(),
IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
widget.deleteFunction(widget.boxIndex);
},
),
]),
RegistrationDropdown(listData: ['One', 'Two', 'Three', 'Four']),
]));
}
}
class RegistrationDropdown extends StatefulWidget {
final List<String> listData;
RegistrationDropdown({
required this.listData,
});
#override
_StateRegistrationDropdown createState() {
return _StateRegistrationDropdown();
}
}
class _StateRegistrationDropdown extends State<RegistrationDropdown> {
String dropdownValue = 'One';
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.only(left: 10, right: 10),
child: DropdownButton<String>(
isExpanded: true,
underline: SizedBox(),
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
onChanged: (String? newValue) {
print("Previous dropdown value $dropdownValue");
print("New value $newValue");
setState(() {
dropdownValue = newValue!;
});
},
items: widget.listData.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
);
}
}
Using this code brings me this warning when I run :
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffebebeb),
body: AnimatedCrossFade(
firstChild: SplashScreen1(),
secondChild: SplashScreen2(),
crossFadeState:
!phaseTwo ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(seconds: 1),
)
);
}
SplashScreen1()
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffebebeb),
);
}
SplashScreen2()
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffebebeb),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset('assets/images/splash_image_1.png'),
],
),
);
}
You can copy paste run full code below
You can replace Scaffold of SplashScreen1 and SplashScreen2 with Container
code snippet
class SplashScreen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffebebeb),
);
}
}
working demo
full code
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,
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> {
bool phaseTwo = false;
#override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 3), () {
setState(() {
phaseTwo = true;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffebebeb),
body: AnimatedCrossFade(
firstChild: SplashScreen1(),
secondChild: SplashScreen2(),
crossFadeState:
!phaseTwo ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(seconds: 1),
));
}
}
class SplashScreen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffebebeb),
);
}
}
class SplashScreen2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffebebeb),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.network('https://picsum.photos/250?image=9'),
],
),
);
}
}
I have this event form, it's to create or edit events data. The save button is inside the app bar action, and the form is inside the body. In this project, I have all of the widgets in different files. How do I run the save function inside EventFormForm.dart when I tap the save button inside EventFromAppBar.dart?
This is the structure :
These are my codes :
EventForm.dart
class EventForm extends StatelessWidget {
// Some Code
// Some Const
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: EventFormAppBar(
// Some Params
),
body: EventFormBody(
// Some Params
)
);
}
}
EventFormAppBar.dart
class EventFormAppBar extends PreferredSize{
// Some Code
// Some Const
// Some Code
#override
Widget build(BuildContext context) {
return AppBar(
// Some Code
actions: <Widget>[
IconButton(
icon: Icon(Icons.save),
onPressed: () {
}
)
]
);
}
}
EventFormBody.dart
class EventFormBody extends StatelessWidget {
// Some Code
// Some Const
#override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
child: EventFormForm(
// Some Params
),
),
);
}
}
EventFormForm.dart
class EventFormForm extends StatefulWidget {
// Some Code
// Some Const
#override
EventFormFormState createState() => EventFormFormState();
}
class EventFormFormState extends State<EventFormForm> {
//
//
// Some Code
//
//
#override
Widget build(BuildContext context) {
return Form(
//
// Some Code
//
);
}
saveForm() {
//
// Some Code
//
}
}
Tag #chunhunghan
You can copy paste run each files below
Step 1: Use final keyForm = GlobalKey<EventFormFormState>();
Step 2: Pass keyForm to EventFormForm(key: keyForm)
Step 3: In IconButton call keyForm.currentState.saveForm();
IconButton(
icon: Icon(Icons.save),
onPressed: () {
keyForm.currentState.saveForm();
})
working demo
full code
main.dart
import 'package:flutter/material.dart';
import 'event_form.dart';
import 'event_form_form.dart';
void main() => runApp(MyApp());
final keyForm = GlobalKey<EventFormFormState>();
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: EventForm(),
);
}
}
event_form.dart
import 'package:flutter/material.dart';
import 'event_form_appbar.dart';
import 'event_form_body.dart';
class EventForm extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(appBar: EventFormAppBar(), body: EventFormBody());
}
}
event_form_appbar.dart
import 'package:flutter/material.dart';
import 'main.dart';
class EventFormAppBar extends PreferredSize {
#override
Widget build(BuildContext context) {
return AppBar(actions: <Widget>[
IconButton(
icon: Icon(Icons.save),
onPressed: () {
keyForm.currentState.saveForm();
})
]);
}
#override
get preferredSize => Size.fromHeight(50);
}
event_form_body.dart
import 'package:flutter/material.dart';
import 'main.dart';
import 'event_form_form.dart';
class EventFormBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
child: EventFormForm(key: keyForm),
),
);
}
}
event_form_form.dart
import 'package:flutter/material.dart';
class EventFormForm extends StatefulWidget {
EventFormForm({Key key}) : super(key: key);
#override
EventFormFormState createState() {
return EventFormFormState();
}
}
class EventFormFormState extends State<EventFormForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
saveForm();
},
child: Text('Submit'),
),
),
],
),
);
}
void saveForm() {
print("execute save Form");
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
}
}