Main.dart
I want to loop the cards in the flutter.Since in Angular 2 just *ngFor works fine now in same way how can i loop it.I don't found and docs on flutter web.
you will find the output in the screen shot
Please help me to know how to loop cards or any other widgets
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
home:new MyCard()
);
}
}
class MyCard extends StatelessWidget{
#override
Widget build(BuildContext context) {
Widget allcards;
return new Scaffold(
appBar: new AppBar(
title: new Text('My First App'),
backgroundColor:new Color(0xFF673AB7),
),
body: new Container(
child: new Column(
children: <Widget>[
new Card(
child: new Column(
children: <Widget>[
new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Row(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.thumb_up),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.comment),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
)
],
)
)
],
),
)
],
),
)
);
}
}`
This is my dart file
screen shot
Just like Angular2 having an iteratable to loop over is what makes any loop works.
So I did some refactoring in your code and added a the list, changed Column with a ListView and here is the result:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
home:new MyCard()
);
}
}
class MyCard extends StatelessWidget{
List cards = new List.generate(20, (i)=>new CustomCard());
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('My First App'),
backgroundColor:new Color(0xFF673AB7),
),
body: new Container(
child: new ListView(
children: cards,
)
)
);
}
}
class CustomCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Card(
child: new Column(
children: <Widget>[
new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Row(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.thumb_up),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.comment),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
)
],
)
)
],
),
);
}
}
In case if any one gets error with above solution please add .toList() to
List cards = new List.generate(20, (i)=>new CustomCard()).toList();
In order to avoid this error:
This class (or a class which this class inherits from) is marked as '#immutable', but one or more of its instance fields are not final:
Just put
final
At this line:
List cards = new List.generate(20, (i)=>new CustomCard());
Staying this:
final List cards = new List.generate(20, (i)=>new CustomCard());
Related
I can't figure it out how to make this background properly sized to the rest of the screen. Anyone could point me whats wrong ??
I kinda trying to make this fit the rest screen but can;t manage to do it...
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new GradientAppBar('Milkyway Galaxy'),
new Container(
child: new Stack(
children: <Widget>[
_buildBackground(),
_buildDescription(),
],
),
),
],
);
}
Widget _buildBackground() {
return new Container(
// constraints: new BoxConstraints.expand(),
child: new Image.asset('assets/images/milkyway.gif', fit: BoxFit.cover,),
);
}
Widget _buildDescription() {
return new Container(
child: new Center(
child: new Text(milkyWayGalaxy.description),
),
);
}
}
Use BoxDecoration to apply your image as a background image of your Container. Use the Expanded widget to make sure that the Container fills the remaining space of the screen:
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new GradientAppBar('Milkyway Galaxy'),
new Expanded(
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/milkyway.gif'),
fit: BoxFit.cover,
),
),
child: new Center(
child: new Text(milkyWayGalaxy.description),
),
),
),
],
);
}
}
If the text is longer, you may want to wrap it in a SingleChildScrollView.
In my MaterialApp I have a Column inside a horizontal ListView.
Inside that Column is a Text widget.
ListView(
children: [
Column(
children: [
Text('this is the text widget'),
// here I have another widget placed, just imagine a rectangle
],
],)
textAlign: TextAlign.center, nor surrounding it with a Center will change the position of the Text. The Text will always stay in the top left corner.
Also, I saw a lot about axis alignments in answers regarding similar problems, but I tried every axis settings I saw without success.
As you can see the text in the upper image is not centered.
You need crossAxisAlignment: CrossAxisAlignment.center
ListView(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('this is the text widget'),
// here I have another widget placed, just imagine a rectangle
],
),
],
)
EDIT:
Since, you are unsatisfied with above answer. I re-did what you exactly want. Please refer below code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'MediaQuery Demo',
theme: new ThemeData(
primarySwatch: Colors.red,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget widgetToRepeat() {
return new Column(
children: <Widget>[
new Text('Hello'),
new Container(
width: 100.0,
height: 150.0,
color: Colors.green,
margin: new EdgeInsets.all(8.0),
)
],
);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Demo'),
),
body: new Column(
children: <Widget>[
new Container(
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
widgetToRepeat(),
widgetToRepeat(),
widgetToRepeat(),
widgetToRepeat(),
widgetToRepeat(),
],
),
height: 150.0 + 16.0 + 20.0 + 16.0,
padding: new EdgeInsets.all(10.0),
)
],
),
);
}
}
I hope this helps. I am able to achieve text at horizontally center.
return new ListView(children: [
new Center(
child: Column(
children: [
Text('this is the text widget'),
// here I have another widget placed, just imagine a rectangle
],
),
)
]);
warp with new Center Widget
I have the following layout in one of my components and would like to put a line on top of that like this:
That is my current code and already searched through the API documentation of Flutter for a while now and didn't find something suitable to achieve that.
new Row(
children: <Widget>[
new Expanded(
child: const Text("Some text"),
),
const Text("Some other text"),
],
)
Any pointers or ideas how to do that?
Okay. Got it working by using a custom Decoration.
Here is my code:
class StrikeThroughDecoration extends Decoration {
#override
BoxPainter createBoxPainter([VoidCallback onChanged]) {
return new _StrikeThroughPainter();
}
}
class _StrikeThroughPainter extends BoxPainter {
#override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
final paint = new Paint()
..strokeWidth = 1.0
..color = Colors.black
..style = PaintingStyle.fill;
final rect = offset & configuration.size;
canvas.drawLine(new Offset(rect.left, rect.top + rect.height / 2), new Offset(rect.right, rect.top + rect.height / 2), paint);
canvas.restore();
}
}
Used like that in my component:
new Container(
foregroundDecoration: new StrikeThroughDecoration(),
child: new Row(
children: <Widget>[
new Expanded(
child: const Text("Some text"),
),
const Text("Some other text"),
],
)
)
You could use a Stack with a Divider.
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Example App')),
body: new Padding(
padding: new EdgeInsets.all(5.0),
child: new Center(
child: new Stack(
children: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text('Hello world'),
new Text('Some other text'),
],
),
new Positioned.fill(
left: 0.0,
right: 0.0,
child: new Divider(color: Colors.black),
)
],
),
),
),
);
}
}
I created a screen that works well with the columns, but I needed to scroll because of the keyboard.
When you insert the SingleChildScrollView or the ListView attribute the MainAxisAlignment.spaceBetween, it no longer works.
Was there any solution for that?
Gif without the SingleChildScrollView the screen does not roll and the FloatingActionButton is at the bottom of the screen
Gif with SingleChildScrollView the screen roll and he FloatingActionButton is not in bottom of the screen
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
child: new Column(
children: <Widget>[
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
],
)
),
new Container(
margin: new EdgeInsets.only(bottom: 16.0),
child: new FloatingActionButton(
backgroundColor: new Color(0xFFE57373),
child: new Icon(Icons.check),
onPressed: (){}
),
)
],
),
)
);
}
}
I would recommend against using FloatingActionButton in the way you are doing here. FloatingActionButton should be used for actions that always need to always be on screen at all times. See the Material guidelines on button usage for suggestions on other button types that can be scrolled, like RaisedButton and FlatButton. You could use a RaisedButton here, but I think it would be better to make your screen a dialog and put the save action in the AppBar as I suggested in your other question.
If you do decide to use a RaisedButton or FlatButton, keep in mind that scrollables don't normally change their item spacing based on the size of their container. Instead of using MainAxisAlignment.spaceBetween, you could put some Padding around your RaisedButton to separate it from the TextField elements. This will ensure that they are spaced the same distance apart regardless of rotation, screen size, and regardless of whether the keyboard is up.
Follow the code below to register.
MainAxisAlignment.spaceBetween has been replaced with dynamic padding, depending on screen size.
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
final ui.Size logicalSize = MediaQuery.of(context).size;
final double _height = logicalSize.height;
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new SingleChildScrollView(
child: new Column(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 300.0,
child: new Column(
children: <Widget>[
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
new TextField(
decoration: const InputDecoration(
labelText: "Description",
),
style: Theme.of(context).textTheme.title,
),
],
)
),
new Container(
padding: new EdgeInsets.only(top: (_height - 450.0)),
margin: new EdgeInsets.only(bottom: 16.0),
child: new FloatingActionButton(
backgroundColor: new Color(0xFFE57373),
child: new Icon(Icons.check),
onPressed: (){}
),
)
],
),
)
);
}
}
I would like to display a large FlutterLogo in my app:
https://docs.flutter.io/flutter/material/FlutterLogo-class.html
In order to account for varying screen sizes I would like to make it stretch-to fill. Is that possible? Or do I need to use a MediaQuery to determine the parent's size and pass that into FlutterLogo(size:)?
My current code:
Widget build(BuildContext context) {
return new Center(
child: new FlutterLogo(size: 800.0, style: FlutterLogoStyle.horizontal, textColor: Colors.white),
);
}
You can accomplish this with a ConstrainedBox:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData.dark(),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Example App')),
body: new ConstrainedBox(
constraints: new BoxConstraints.expand(),
child: new FlutterLogo(
style: FlutterLogoStyle.horizontal,
textColor: Colors.white,
),
),
);
}
}
I believe I have answered a similar question
How to stretch an icon to fill parent?
https://docs.flutter.io/flutter/widgets/Expanded-class.html
https://groups.google.com/forum/#!msg/flutter-dev/lsgdU1yl7xc/0pYS2qrzBQAJ
https://docs.flutter.io/flutter/widgets/FittedBox-class.html
https://docs.flutter.io/flutter/painting/BoxFit-class.html
new Expanded(
child: new FittedBox(
fit: BoxFit.fill,
child: new FlutterLogo( style: FlutterLogoStyle.horizontal, textColor: Colors.white),
),
),
I feel kinda strange. Looking at the OP profile ID, I wonder if I answer the question correctly.
I hope this helps.
used this code to run it
import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
// Fields in a Widget subclass are always marked "final".
final Widget title;
#override
Widget build(BuildContext context) {
return new Container(
height: 56.0, // in logical pixels
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(color: Colors.blue[500]),
// Row is a horizontal, linear layout.
child: new Row(
// <Widget> is the type of items in the list.
children: <Widget>[
new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null disables the button
),
// Expanded expands its child to fill the available space.
new Expanded(
child: title,
),
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
}
class MyScaffold extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Material is a conceptual piece of paper on which the UI appears.
return new Material(
// Column is a vertical, linear layout.
child: new Column(
children: <Widget>[
new MyAppBar(
title: new Text(
'Example title',
style: Theme.of(context).primaryTextTheme.title,
),
),
new Expanded(
child: new FittedBox(
fit: BoxFit.fill,
child: new FlutterLogo( style: FlutterLogoStyle.horizontal, textColor: Colors.white),
),
),
],
),
);
}
}
void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyScaffold(),
));
}
edit: I posted complete code just for darky, since I forgot to mention that expanded needs to be wrapped into row, column, or flex container to expand