Cannot scroll a ListWheelScrollView inside another Scrollable Widget - flutter

I currently have a ListWheelScrollView as part of one of the children of a ListView. The ListWheelScrollView is horizontal (using a RotatedBox) and the ListView is vertical, however, I am unable to scroll it unless the Physics of the ListView is set to NeverScrollableScrollPhysics. Is it possible to fix this, without having to make my own widget that achieves the same thing as a ListWheelScrollView?
Edit:
As per request, here is some sample code that can reproduce the issue:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
color: Colors.transparent,
child: SingleChildScrollView(
child: Column(
children: [
Container(height: 300, color: Colors.black),
Container(height: 300, color: Colors.red),
Container(height: 300, color: Colors.green),
Container(
height: 300,
child: RotatedBox(
quarterTurns: 1,
child: ListWheelScrollView(
itemExtent: 25,
children: const [
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
],
),
),
color: Colors.white,
),
Container(height: 300, color: Colors.blue),
Container(height: 300, color: Colors.orange),
],
),
),
),
);
}
}
In the above sample code, once you reach the ListWheelScrollView, you can not scroll on it.
However, if we set the Physics of the SingleChildScrollView to NeverScrollableScrollPhysics, like below, then we are able to scroll the ListWheelScrollView.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
color: Colors.transparent,
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Column(
children: [
Container(height: 300, color: Colors.black),
Container(height: 300, color: Colors.red),
Container(height: 300, color: Colors.green),
Container(
height: 300,
child: RotatedBox(
quarterTurns: 1,
child: ListWheelScrollView(
itemExtent: 25,
children: const [
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
Text(
"something",
),
],
),
),
color: Colors.white,
),
Container(height: 300, color: Colors.blue),
Container(height: 300, color: Colors.orange),
],
),
),
),
);
}
}

Related

Can I have an idea for Tabber in Flutter?

I have no idea How to make Tab bar like This in my flutter web
Can I have an idea or How call This pattern.
Example video:
https://youtu.be/A3ttwYljg_8
You just have to give body to TabBarView, rest will be taken care by flutter itself.
Sample Code : -
TabBarView(
children: <Widget>[
Tabbar 1 body ...., //1st index, 1st tab
Tabbar 2 body ...., //2nd index, 2nd tab
Tabbar 3 body ...., //...
Tabbar 4 body ...., //...
Tabbar 5 body .... //...
]
)
TabBarView
Complete Code : -
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatefulWidget {
const MyStatelessWidget({super.key});
#override
State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}
class _MyStatelessWidgetState extends State<MyStatelessWidget> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,
length: 5,
child: Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromARGB(255, 107, 179, 234),
title: const Text('TabBar Widget'),
bottom: const TabBar(
labelColor: Colors.black,
indicator: BoxDecoration(color: Colors.yellow),
labelPadding: EdgeInsets.only(bottom: 5),
indicatorPadding:
EdgeInsets.only(left: 30, right: 30, bottom: 10, top: 5),
tabs: <Widget>[
SizedBox(
width: 70,
height: 40,
child: Center(
child: Tab(
text: "Tab 1",
),
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 2",
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 3",
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 4",
),
),
SizedBox(
width: 70,
height: 40,
child: Tab(
text: "Tab 5",
),
),
],
),
),
body: TabBarView(
children: <Widget>[
Column(
children: [
Expanded(
child: Container(
color: Colors.red,
)),
Expanded(
child: Container(
color: Colors.purple,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 9, 79, 135),
)),
Expanded(
child: Container(
color: Colors.purple,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 144, 255, 54),
)),
Expanded(
child: Container(
color: Colors.purple,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 109, 40, 36),
)),
Expanded(
child: Container(
color: Colors.yellow,
))
],
),
Column(
children: [
Expanded(
child: Container(
color: Colors.green,
)),
Expanded(
child: Container(
color: Colors.yellow,
))
],
),
],
),
),
);
}
}
Output :-

How can I use the Tab bar in the middle of the screen?

(https://i.stack.imgur.com/IPAAP.png)
I get this error when I use TabBarView.RenderBox was not laid out: _RenderColoredBox#63150 relayoutBoundary=up2 'package:flutter/src/rendering/box.dart': Failed assertion: line 2001 pos 12: 'hasSize'
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 const MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('TabBar'),
),
body: Container(
child: Column(
children: [
const SizedBox(
height: 200,
),
TabBar(
tabs: [
Tab(
icon: Icon(
Icons.list,
color: Colors.black,
),
),
Tab(
icon: Icon(
Icons.grid_view,
color: Colors.black,
),
),
],
),
TabBarView(
children: [
Container(
width: double.infinity,
height: 1000,
color: Colors.amber,
child: Text('ListPage'),
),
Container(
width: double.infinity,
height: 1000,
color: Colors.green,
child: Text('GridPage'),
),
],
)
],
),
),
),
);
}
}
TabBarView(
children: [
Container(
width: double.infinity,
height: 1000,
color: Colors.amber,
child: Text('ListPage'),
),
Container(
width: double.infinity,
height: 1000,
color: Colors.green,
child: Text('GridPage'),
),
],
)
When I use it, the tab bar is no longer displayed.enter image description here
Try this
Scaffold(
body: SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.3,
decoration: BoxDecoration(),
),
Expanded(
child: DefaultTabController(
length: 3,
initialIndex: 0,
child: Column(
children: [
TabBar(
tabs: [
Tab(
text: 'Example 1',
),
Tab(
text: 'Example 2',
),
Tab(
text: 'Example 3',
),
],
),
Expanded(
child: TabBarView(
children: [
Text(
'Tab View 1',
),
Text(
'Tab View 2',
),
Text(
'Tab View 3',
),
],
),
),
],
),
),
),
],
),
),
),
);

Positioning widget not effective | How to position containers

I am still new to flutter, and I want to position the box in the screenshot below, not in the centre of the screen, but at a certain distance away from the left side with text inside the box.
I have tried the positioning widget but still no luck.
Any advice on what widget I would use, and how to do so properly?
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/startbackground.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Container(
height: 500.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
),
));
}
}
Try out that code. I mainly used containers, paddings, alignment property as well as the axis alignment for the column. With that I achieved what you can see on the screenshot below. In order to use an image behind all that, I would just simply recommend to use a stack and then this whole code with some adaptations. The colors are just illustrative. You could set all of them transparent.
Here is the screenshot:
And here is the 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(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text("EXAMPLE"),
),
body: Container(
color: Colors.orangeAccent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text("Text", style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700),textAlign: TextAlign.left,),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text("Some Text", style: TextStyle(fontSize: 60, fontWeight: FontWeight.w700),),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text("Some Text", style: TextStyle(fontSize: 60, fontWeight: FontWeight.w700),),
color: Colors.teal,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: (){},
child: Text(
"HI",
style: TextStyle(
color: Color(0xff7638c9),
fontSize: 11),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
);
}
}

Overflow visible in Expanded widget

My layout is a row with three expanded widgets.
I need overflow visible in one of the expanded widgets
This is the code
Row(
children: [
Expanded(
flex: 1,
child: Container(color: Colors.red,)
),
Expanded(
flex: 2,
child: Container(color: Colors.green,)
),
Expanded(
flex: 3,
child: Container(color: Colors.orange,)
),
],
),
Now I need to add circles like this, in of the Expanded widgets, that overflow the Expanded widget. I can't wrap the Expanded in an overflow box, so I am lost
Any help is appreciated.
Edit: I tried this with the third expanded, just to see if it will overflow, but it only overflows the SizedOverflowBox, no overflow over the Expanded
Expanded(
flex: 3,
child: SizedOverflowBox(
size: const Size(100.0, 100.0),
alignment: AlignmentDirectional.bottomCenter,
child: Container(height: 50.0, width: 1500.0, color: Colors.blue,),
),
),
It looks like it is not going to be possible
Can easily be achieved with a Stack. Please see the code below :
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: [
Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
)),
Expanded(
flex: 2,
child: Container(
color: Colors.green,
)),
Expanded(
flex: 3,
child: Container(
color: Colors.orange,
)),
],
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 25,
width: 25,
decoration:
BoxDecoration(color: Colors.black, shape: BoxShape.circle),
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
),
),
Container(
height: 25,
width: 25,
decoration:
BoxDecoration(color: Colors.black, shape: BoxShape.circle),
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
),
),
Container(
height: 25,
width: 25,
decoration:
BoxDecoration(color: Colors.black, shape: BoxShape.circle),
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
),
),
],
),
),
],
);
}
}
Please see the code for Text Bullet points overflowing.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(),
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red.withAlpha(60),
child: OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 400,
child: SizedBox(
width: 300,
child: Text(
'HelloHello 🅐',
style: TextStyle(color: Colors.white),
),
),
),
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.green.withAlpha(60),
child: OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 400,
child: SizedBox(
width: 300,
child: Container(
child: Text(
'\n\nHelloHello HelloHello 🅐\n\nHelloHello HelloHello 🅐\n\nHelloHello HelloHello 🅐\n\nHelloHello HelloHello 🅐',
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.purple.withAlpha(60),
child: OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 400,
child: SizedBox(
width: 300,
child: Text(
'\n\n\n\n\n\n\n\n\n\n\n\Hello Hello Hello Hello Hello Hello ',
style: TextStyle(color: Colors.white),
),
),
),
),
),
],
);
}
}

How to fix black screen in flutter while Navigating?

I am creating a multi-paged app on flutter. When I am using the navigation in it, I am getting a black screen.
import 'package:flutter/material.dart';
void main() => runApp(MyHomePage());
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Page0(),
);
}
}
class Page0 extends StatefulWidget {
#override
_Page0State createState() => _Page0State();
}
class _Page0State extends State<Page0> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF493597),
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: <Widget>[
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(height: 60.0),
Container(
margin: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
height: MediaQuery.of(context).size.height - 150,
decoration: BoxDecoration(
color: Color(0xFFFCFCFC),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 20.0,
top: 25.0,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
//greeting text
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'Hello! :)',
style: TextStyle(
fontFamily: 'Permanent-Marker',
color: Colors.black,
fontSize: 30.0,
),
),
),
),
],
),
SizedBox(
height: 30.0,
),
//add button
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
elevation: 10.0,
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => NewTrip()),);
},
),``
),
),
),
//add text
Expanded(
flex: 1,
child: Text(
'New trip',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
),
]),
SizedBox(
height: 30.0,
),
//previous trip button
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
elevation: 10.0,
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.assessment,
color: Colors.black,
),
),
),
),
),
//previous trip text
Expanded(
flex: 1,
child: Text(
'Previous trips',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
)
],
),
SizedBox(
height: 50.0,
),
],
),
),
],
),
),
],
),
);
}
}
And the NewTrip widget is as follows
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Text('NEW TRIP'),
),
);
}
}
The home page is loading fine but as soon as I click the new trip button, it shows a black screen. Probably there is an issue with MaterialApp or Scaffold but I am not able to fix it yet. Can anyone tell me what's the problem and how to fix it?
Updated the full code as requested in the comments.
So in NewTrip() remove MaterialApp since it inherits from the parent. Just return Scaffold.
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
Okay so after some research on the internet, I found out that it's the FloatingActionButton that is causing the trouble.
I replaced the FloatingActionButton with MaterialButton and this fixed my issue.
Please check the full code edit from your code. Actually you are using two FloatingActionButton. So you need to use two heroTag with different name. I already added in the code. No problem with NewTrip class.
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Page0(),
);
}
}
class Page0 extends StatefulWidget {
#override
_Page0State createState() => _Page0State();
}
class _Page0State extends State {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF493597),
body: ListView(
children: [
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: [
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(height: 60.0),
Container(
margin: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
height: MediaQuery.of(context).size.height - 150,
decoration: BoxDecoration(
color: Color(0xFFFCFCFC),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 20.0,
top: 25.0,
),
children: [
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: [
//greeting text
Row(
children: [
Expanded(
child: Center(
child: Text(
'Hello! :)',
style: TextStyle(
fontFamily: 'Permanent-Marker',
color: Colors.black,
fontSize: 30.0,
),
),
),
),
],
),
SizedBox(
height: 30.0,
),
//add button
Row(children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn",
elevation: 10.0,
backgroundColor: Colors.white,
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewTrip()),
);
},
),
),
),
),
//add text
Expanded(
flex: 1,
child: Text(
'New trip',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
),
]),
SizedBox(
height: 30.0,
),
//previous trip button
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100.0,
width: 100.0,
child: FittedBox(
child: FloatingActionButton(
heroTag: "btn1",
elevation: 10.0,
backgroundColor: Colors.white,
onPressed: () {},
child: Icon(
Icons.assessment,
color: Colors.black,
),
),
),
),
),
//previous trip text
Expanded(
flex: 1,
child: Text(
'Previous trips',
style: TextStyle(
fontFamily: 'Nanum',
fontSize: 30.0,
),
),
)
],
),
SizedBox(
height: 50.0,
),
],
),
),
],
),
),
],
),
);
}
}
NewTrip class
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
Before:
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Text('NEW TRIP'),
);
}
}
So to Solve this problem we wrap the new navigate widget with scaffold widget
Solution After:
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Material(
child: Text('NEW TRIP'),
),
);
}
}
The issue is that you are using a materialApp inside another materialApp
Navigator just changes the pages and we don't need separate materialApp in NewTrip().
So the NewTrip should be as follow
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
I believe there can only be one MaterialApp Widget in the entire Flutter application because MaterialApp Widget is likely to be the main or core component of Flutter. So when you try to navigate to a new screen try returning Scaffold Widget instead of MaterialApp Widget.
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
Use ThemeData, along with the parameter scaffoldBackgroundColor.
For example:
ThemeData (
scaffoldBackgroundColor: Colors.black,
)
In my case, it is caused by:
// to set portait screen orientation
SystemChrome.setPreferredOrientation([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
// Instead i use `android:screenOrientation="portrait"` on my AndroidManifest.xml.
That I declared when the page widget render. Removed it solve my black screen issue.
Change scaffoldBackgroundColor
theme: ThemeData(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: Colors.white, //here
visualDensity: VisualDensity.adaptivePlatformDensity,
),
class NewTrip extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Text('NEW TRIP'),
);
}
}
simply just put scaffold in next page that's it.
If the page you navigate does not contain Scaffold the page will be black since Scaffold Implements the basic material design visual layout structure so apply Scaffold and the parent widget material app.
The problem you are facing because the widget you are navigating does not have any material widget.
Just wrap the navigated screen's return widget with Scaffold as a parent.