Flutter - New page route is only leading to a blank page - flutter

I've already created one page route, to the feed_page, but now, when going from feed_page to new_post_page, the new_post_page is just blank on the simulated phone.
Here's the obligatory code dump :)
In this first code dump (page of origin), I omitted the other contents of the appBar and the body of the scaffold:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:we_rise/post_card.dart';
import 'new_post_page.dart';
import 'constants.dart';
class FeedPage extends StatefulWidget {
#override
_FeedPageState createState() => _FeedPageState();
}
class _FeedPageState extends State<FeedPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
...
),
actions: <Widget>[
// PAGE ROUTE IN QUESTION
IconButton(
icon: const Icon(Icons.add_circle),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => NewPostPage()));
},
),
],
),
body: ListView.builder(
...
),
);
}
}
And then the problematic new page that is just showing up blank in the simulated phone:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'constants.dart';
class NewPostPage extends StatefulWidget {
#override
_NewPostPageState createState() => _NewPostPageState();
}
class _NewPostPageState extends State<NewPostPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFFFFC033),
title: const Text('New Post'),
),
body: Expanded(
child: Column(
children: const <Widget>[
Text('Placeholder')
],
)
),
);
}
}

Problem is in body, Remove Expanded widget from body only keep Column widget and Run, set as below.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'constants.dart';
class NewPostPage extends StatefulWidget {
#override
_NewPostPageState createState() => _NewPostPageState();
}
class _NewPostPageState extends State<NewPostPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFFFFC033),
title: const Text('New Post'),
),
body: Column(
children: const <Widget>[
Text('Placeholder')
],
),
);
}
}

Ex:
=> You are Remove Expanded Widigit
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'constants.dart';
class NewPostPage extends StatefulWidget {
#override
_NewPostPageState createState() => _NewPostPageState();
}
class _NewPostPageState extends State<NewPostPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFFFFC033),
title: const Text('New Post'),
),
body: Column(
children: const <Widget>[
Text('Placeholder')
],
),
);
}
}

Related

What argument should i give?

In the application, the home page is ResultScreen, which displays the entered data. If they are not there, then when you click on the button, we go to the screen with the input. When I enter text into the input and click on the Display Result button, the data should be substituted into the text field on the first screen. I implemented such functionality, but I don’t understand what argument I should substitute in main.dart. Tell me please
Text Screen:
import 'package:flutter/material.dart';
import 'package:flutter_application_1/screens/result_screen.dart';
class TextScreen extends StatefulWidget {
const TextScreen({Key? key}) : super(key: key);
#override
State<TextScreen> createState() => _TextScreenState();
}
class _TextScreenState extends State<TextScreen> {
TextEditingController textController = TextEditingController();
#override
void dispose() {
textController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Enter data'),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: textController,
decoration: InputDecoration(labelText: 'Message'),
),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ResultScreen(textController.text)));
},
child: Text('Display result'))
],
)),
);
}
}
Result Screen:
import 'package:flutter/material.dart';
import 'package:flutter_application_1/screens/text_screen.dart';
class ResultScreen extends StatefulWidget {
final String valueText;
ResultScreen(this.valueText);
#override
State<ResultScreen> createState() => _ResultScreenState();
}
class _ResultScreenState extends State<ResultScreen> {
// navigation to text_screen
void _buttonNav() {
Navigator.push(
context, MaterialPageRoute(builder: (context) => const TextScreen()));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Results'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _buttonNav, child: const Text('Enter data')),
const SizedBox(
height: 50,
),
Text(valueText),
const SizedBox(
height: 20,
),
],
)),
);
}
}
Main.dart:
import 'package:flutter/material.dart';
import 'package:flutter_application_1/screens/result_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ResultScreen(),
);
}
}
Use the following code.
What is does is, when we enter the first screen i.e. ResultScreen, we pass an empty value for the first time.
Use this in main.dart
home: ResultScreen(''),
And as you are using statefull widget for ResultScreen, you need to use widget.valueText to access it like:
Text(widget.valueText),

Flutter using a changenotifier with named routes

I've followed some online tutorials and managed to implement ChangeNotifier when the app has a single route however none of these explain how to implement this when the app has more than one route (screen) which is rather the point!
I made an attempt to figure this out myself but when the app runs in the emulator I get a blank screen.
/* main.dart */
import 'dart:collection'; // used in test.dart
import 'package:flutter/foundation.dart'; // used in test.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class Person extends ChangeNotifier {
Person({this.firstName});
String firstName = '';
void updateName(String n) {
this.firstName = n;
notifyListeners();
}
}
void main() {
runApp(
Provider(
create: (_) => Person(firstName: 'Mark'),
child: MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeRoute(),
'/second': (context) => SecondRoute(),
'/third': (context) => ThirdRoute(),
},
),
)
);
}
class HomeRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(Provider.of<Person>(context).firstName),
),
body: Center(
child: new IconButton(
icon: new Icon(Icons.favorite, color: Colors.redAccent),
iconSize: 70.0,
onPressed: () {
Navigator.of(context).pushNamed("/second");
}
),
),
);
}
}
class SecondRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Center(
child: Text(Provider.of<Person>(context).firstName),
),
);
}
}
class ThirdRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Third Page'),
),
body: Center(
child: Text('Third Route'),
),
);
}
}
The project builds and runs with no error messages which has stumped me.
Any thoughts?
Code developed in FlutLab

Hi I want to make a Flat Button in flutter that changes the background of the button when I touched it but its not working

I want to make a Flat Button that change the background of the Flat Button when I tocuh it
but it not working.
currently Im using statefull widget because Im changing the background and stateles widget it cant do it.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor:Colors.blue ,
appBar: AppBar(
title: Text("ask me anything"),
backgroundColor: Colors.blue.shade900,
),
body: Ball8(),
),
),
);
}
class Ball8 extends StatefulWidget {
const Ball8({Key? key}) : super(key: key);
#override
_Ball8State createState() => _Ball8State();
}
class _Ball8State extends State<Ball8> {
int num = 5;
#override
Widget build(BuildContext context) {
return Center(
child: Row(
children: <Widget>[
Expanded(
child: FlatButton(
onPressed: (){
randomNum();
},
child: Image.asset("images/ball$num.png"),
),
),
],
),
);
}
void randomNum(){
num = Random().nextInt(6)+1;
}
}
I wasn't exactly sure what you were asking. Consider editing your question. You asked for how to change the background color of a button when it is pressed.
Here you go:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: HomePage(),
),
);
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Color backgroundColour = Colors.blue;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[200],
appBar: AppBar(
title: Text("Ask Me Anything"),
backgroundColor: Colors.blue.shade900,
),
body: Center(
child: FlatButton(
onPressed: () {
setState(() {
backgroundColour = Colors.red;
});
},
color: backgroundColour,
child: Text(
'Click me!',
style: TextStyle(color: Colors.white),
),
),
),
);
}
}
Does using setState on the randomNumber function works ?
setState(() {
num = Random().nextInt(6)+1;
});
you want to change the number of the ball, using different image right ? i hope this can help.
https://dev.to/codingmonkey/let-s-create-dice-game-app-using-stateful-widget-in-flutter-ml2

How to fix sidebar when using Navigation.of.push on iPad

Sorry for my bad English.
Problem
I'm currently developing an application for iPad with Flutter.
It is only used on iPad, not on iPhone or Android.
I want to always display the sidebar where Items are arranged like BottomNavigationBar, but when using Navigator.of.push, moving screen with the sidebar disappeared.
What do I want to do
I wanna make the transition with the sidebar still displayed as in Twitter for iPad or Settings app for iPad, but if anyone knows how to do it, please let me know.
App top screen
Select item1 and push button
How can i set ios back button only on right screen like Settings App for iPad like this image?
I wanna create a UI like a Setting app for iPad.
Code
lib/main.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/master_detail_container.dart';
void main() => runApp(MyAppScreen());
class MyAppScreen extends StatefulWidget {
#override
_MyAppScreenState createState() => _MyAppScreenState();
}
class _MyAppScreenState extends State<MyAppScreen> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MasterDetailContainer(),
);
}
}
lib/ui/master_detail_container.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item_details.dart';
import 'package:health_check/ui/item_listing.dart';
class MasterDetailContainer extends StatefulWidget {
#override
_ItemMasterDetailContainerState createState() =>
_ItemMasterDetailContainerState();
}
class _ItemMasterDetailContainerState extends State<MasterDetailContainer> {
Item _selectedItem;
Widget _sideBar() {
return Flexible(
flex: 1,
child: Material(
elevation: 4.0,
child: ItemListing(
itemSelectedCallback: (item) {
setState(() {
_selectedItem = item;
});
},
selectedItem: _selectedItem,
),
),
);
}
Widget _itemContent() {
return Flexible(
flex: 3,
child: ItemDetails(
item: _selectedItem,
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
_sideBar(),
_itemContent(),
],
),
);
}
}
lib/ui/item_listing.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item_details.dart';
class ItemListing extends StatelessWidget {
ItemListing({
#required this.itemSelectedCallback,
this.selectedItem,
});
final ValueChanged<Item> itemSelectedCallback;
final Item selectedItem;
#override
Widget build(BuildContext context) {
// return
return ListView(
children: items.map((item) {
return ListTile(
title: Text(item.title),
onTap: () => itemSelectedCallback(item),
selected: selectedItem == item,
);
}).toList(),
);
}
}
lib/ui/item_details.dart
import 'package:flutter/material.dart';
import 'package:health_check/ui/item.dart';
import 'package:health_check/ui/item1_screen.dart';
import 'package:meta/meta.dart';
class ItemDetails extends StatelessWidget {
ItemDetails({
#required this.item,
});
final Item item;
#override
Widget build(BuildContext context) {
final TextTheme textTheme = Theme.of(context).textTheme;
final Widget content = Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("Button"),
color: Colors.orange,
textColor: Colors.white,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => Item1Screen()));
},
),
Text(
item?.title ?? 'No item selected!',
style: textTheme.headline,
),
Text(
item?.subtitle ?? 'Please select one on the left.',
style: textTheme.subhead,
),
],
);
return Scaffold(
appBar: AppBar(
title: Text('Appbar'),
),
body: Center(child: content),
);
}
}
lib/ui/item1_screen.dart
import 'package:flutter/material.dart';
class Item1Screen extends StatelessWidget {
Item1Screen();
#override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Item1 detail'),
),
body: Center()
);
}
}
lib/ui/item.dart
import 'package:meta/meta.dart';
class Item {
Item({
#required this.title,
#required this.subtitle,
});
final String title;
final String subtitle;
}
final List<Item> items = <Item>[
Item(
title: 'Item 1',
subtitle: 'This is the first item.',
),
Item(
title: 'Item 2',
subtitle: 'This is the second item.',
),
Item(
title: 'Item 3',
subtitle: 'This is the third item.',
),
];

How to intercept flutter back-button when keyboard is shown

I want to intercept the back-button of the soft keyboard in flutter. So when I want to close the keyboard by pressing the back-button I want an additional function to be called.
How can I do that?
Keyboard Back button
you can use the keyboard_visibility package to achieve this.
Working Example
the following code displays a SnackBar once the keyboard is dismissed.
import 'package:flutter/material.dart';
import 'package:keyboard_visibility/keyboard_visibility.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
GlobalKey<ScaffoldState> _key;
#override
void initState() {
super.initState();
_key = GlobalKey<ScaffoldState>();
KeyboardVisibilityNotification().addNewListener(
onHide: () {
_key.currentState.showSnackBar(
SnackBar(
content: Text("Keyboard closed"),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
key: _key,
body: Center(
child: TextField(),
),
),
);
}
}
you can use the https://pub.dev/packages/flutter_keyboard_visibility package to achieve this.
import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:flutter_keyboard_visibility_example/keyboard_dismiss_demo.dart';
import 'package:flutter_keyboard_visibility_example/provider_demo.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Demo(),
);
}
}
class Demo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return KeyboardDismissOnTap(
child: Scaffold(
appBar: AppBar(
title: Text('Keyboard Visibility Example'),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ProviderDemo()),
);
},
child: Text('Provider Demo'),
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => KeyboardDismissDemo()),
);
},
child: Text('KeyboardDismiss Demo'),
),
Spacer(),
TextField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Input box for keyboard test',
),
),
Container(height: 60.0),
KeyboardVisibilityBuilder(builder: (context, visible) {
return Text(
'The keyboard is: ${visible ? 'VISIBLE' : 'NOT VISIBLE'}',
);
}),
Spacer(),
],
),
),
),
),
);
}
}