Why am I unable to add an Image here? I am getting this error while adding an Image to Column Widget in Flutter. When I am removing the new keyword, I am getting another error. Please check into this issue . I have made a folder named assets>images>girl-icon.jpg . Also, I have enabled assets from pubspec.yaml file.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My First Flutter App',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
),
home: const WelcomeScreen());
}
}
class WelcomeScreen extends StatelessWidget {
const WelcomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
backgroundColor: Colors.amber,
),
body:Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget> [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
new Image.asset("assets/images/girl-icon.jpg"),
],
),
heightFactor: 30,
),
);
}}
See screenshot of the problem here
const requires a hard coded constant value and you have called MyApp as constant while it's dynamically being build that is why it's throwing an error. Remove const before MyApp to solve this issue :
void main() {
runApp(MyApp());
}
and also from here :
children: <Widget> [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
new Image.asset("assets/images/girl-icon.jpg"),
]
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My First Flutter App',
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
),
home: const WelcomeScreen());
}
}
class WelcomeScreen extends StatelessWidget {
const WelcomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Page'),
backgroundColor: Colors.amber,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
)),
Image.asset("assets/images/girl-icon.jpg"),
],
),
heightFactor: 30,
),
);
}
}
my way is just to remove the
const <Widget>
Related
I'm fluter newbie. I wrote some basic code like below and run symulator but it has error like a picture.
I searched with those keywords but couldn't find result related flutter..
How can I work arrange this problem?
Source code below attatched!
import 'package:flutter/material.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.teal,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [IconButton(icon: Icon(Icons.person), onPressed: (){},)],
bottom: TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.note_alt),
),
Tab(
icon: Icon(Icons.list_alt),
),
Tab(
icon: Icon(Icons.settings),
),
],
),
),
body: TabBarView(
children: <Widget>[
Center(
child: Text("You can upload here"),
),
Center(
child: Text("You can load data here"),
),
Center(
child: Text("Settings Page"),
),
],
)
),
);
}
}
I used the codes following flutter's formal page about TabBar class.
I want to know how to replicate this slide-up widget in Flutter when I click a button.
Final product :https://imgur.com/a/HEZsMwN
(Stack Overflow won't let me post pictures)
Here is a code example using a variation of the starting app:
import 'package:flutter/material.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: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//this is the custom function
showTextAreaSheet(BuildContext context) {
return showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) => Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom), //keeps above keyboard
child: const TextField(
autofocus:true,
decoration: InputDecoration(
labelText: "New Task",
labelStyle: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.w600,
)
),
),
) );
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'Press button to open Text Area',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {showTextAreaSheet(context);},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
I am using a showModalBottomSheet function that I call through the showTextAreaSheet(BuildContext context).
The important part is the padding around the TextField that keeps the text field above the keyboard at all times.
it's called Bottom Sheet
Here is an example
all. I am trying to add a ListView.builder to a Column that is inside a SingleChildScrollView. However, I am getting an exception, likely due to the fact that there is no constraint for the ListView.builder. Here is my code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListView.builder(
itemBuilder: (context, index) => const Text('a'),
itemCount: 2,
),
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
If I use a Container and set a defined height, the code above works. However, I am trying to get the ListView.builder to not have a fixed size. I've tried using the Expanded widget and I still get this error. Is there a way to make this work without a defined height? Thanks
In the column widget add mainAxisSize:MainAxisSize.min and in List view.builder add shrinkWrap:true and physics:NeverScrollablePhysics(). That should solve the issue and instead of center widget use SafeArea or a container with specific height.
Here's your working code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ListView.builder(
shrinkWrap:true,// -> Add this here
physics:NeverScrollablePhysics(),// -> And this one
itemBuilder: (context, index) => const Text('a'),
itemCount: 2,
),
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
I'm using a nested MaterialApp such that, FirstMaterialApp has SecondMaterialApp as its child. I'm facing an issue when calling showDialog from SecondMaterialApp, that is it appears on the entire screen as if it is opened from the FirstMaterialApp.
I want that the dialog remains confined to the boundaries of the SecondMaterialApp.
In the image, I have intentionally stretched the Dialog across the width so that it is apparent that it covers the FirstMaterialApp.
First MaterialApp
class FirstMaterialApp extends StatelessWidget {
const FirstMaterialApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'First Material App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First App Scaffold'),
),
body: Center(
child: DeviceFrame(
device: Devices.ios.iPhone12, screen: const SecondMaterialApp()),
));
}
}
Second MateriaApp
class SecondMaterialApp extends StatelessWidget {
const SecondMaterialApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Second Materia App', home: SecondScaffold());
}
}
class SecondScaffold extends StatelessWidget {
const SecondScaffold({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 40.0),
child: Scaffold(
appBar: AppBar(
title: const Text('Second App Home'),
),
body: Center(
child: TextButton(
child: const Text('Open Dialog'),
onPressed: () async {
await showDialog(
context: context,
builder: (buildContext) => CustomDialog());
},
),
),
),
);
}
}
class CustomDialog extends StatelessWidget {
const CustomDialog({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Dialog(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: const [
Text(
'Dialog',
style: TextStyle(fontSize: 20.0),
),
Text(
'Message Text',
),
],
),
);
}
}
Found the solution by using a showDialog parameter named useRootNavigator. Setting it to false provided the required results.
Now the dialog is confined to the boundaries of child MaterialApp and the backgroundOverly from showDialog covers only the second material app.
-> use Your Second File code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SecondMaterialApp extends StatelessWidget {
const SecondMaterialApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Second Materia App', home: SecondScaffold());
}
}
class SecondScaffold extends StatelessWidget {
const SecondScaffold({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 40.0),
child: Scaffold(
appBar: AppBar(
title: const Text('Second App Home'),
),
body: Center(
child: TextButton(
child: const Text('Open Dialog'),
onPressed: () async {
await showDialog(
context: context,
builder: (buildContext) => const CustomDialog());
},
),
),
),
);
}
}
class CustomDialog extends StatelessWidget {
const CustomDialog({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoAlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: const \[
Text(
'Dialog',
style: TextStyle(fontSize: 20.0),
),
Text(
'Message Text',
),
\],
),
);
}
}
create material before dialog
return Material(child: Dialogue());
I have a ListView consisting of several Cards how can I make it so that when the application starts, the order of these Cards in the ListView is random?
You can put all your elements you want to display in one list (if they are not already in a list) before generating the Cards and use the "shuffle" function:
https://api.flutter.dev/flutter/dart-core/List/shuffle.html
Random cards
I built a full working example for you:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#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> {
var imageNames = ["screen.png", "screen1.png", "screen2.png", "screen3.png", "screen4.png", "another_image.png"]; // you don't need to store the whole path
#override
void initState() {
imageNames.shuffle(); // shuffle your list of images
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
padding: EdgeInsets.all(16),
children: [
for (String imageName in imageNames) // iterate over your list
buildImageCard('assets/images/$imageName'),
]
)));
}
}
Widget buildImageCard(String imagePath) => Card( // from https://stackoverflow.com/a/66893064/3161139
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Column(
children: [
Stack(
children: [
Ink.image(
image: AssetImage(imagePath),
height: 240,
fit: BoxFit.cover,
),
Positioned(
bottom: 30,
right: 16,
left: 16,
child: Text(
'Interesting fact!',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
),
],
),
],
),
);