ListView in flutter - dart

We are needing to place a column of rounded edge containers in a list view, when i wrap them in the listview they dont show up, I'm new to flutter so im sure i am missing something. Im adding ascreenshot of the design that doesnt scroll, these containers will load dynamically and scroll once i can get the listview working.
Screenshot
Here is the code for the screen
import 'package:flutter/material.dart';
import 'package:lightbridge_mobile/ui/gradient_app_bar.dart';
import 'package:lightbridge_mobile/ui/widget_container.dart';
class WidgetsPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromRGBO(1,89,99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
],
),
)
);
}
}
Here is the code for the widget containers
class WidgetContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new WidgetRow();
}
}
Here is the widget row code
class WidgetRow extends StatelessWidget {
#override Widget build(BuildContext context) {
return new Container(
height: 160.0,
margin: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 24.0,
),
child: new Stack(
children: <Widget>[
widgetCard,
widgetThumbnail,
],
)
);
}
final widgetCard = new Container(
child: Row(
children: <Widget>[
],
),
height: 160.0,
margin: new EdgeInsets.only(left: 0.0),
decoration: new BoxDecoration(
color: Colors.white70.withOpacity(0.25),
shape: BoxShape.rectangle,
borderRadius: new BorderRadius.circular(8.0),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.black12,
blurRadius: 10.0,
offset: new Offset(0.0, 10.0),
),
],
),
);
final widgetThumbnail = new Container(
margin: new EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 10.0,
),
alignment: FractionalOffset.topLeft,
child: new Icon(
FontAwesomeIcons.comments,
size: 40.0,
color: Colors.white70,
),
);
}

Instead of Column use - ListView directly. don't wrap it.
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight)),
child: ListView(
children: <Widget>[
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
],
),
),
);
}

Related

Create 3 row columns with horizontal scroll in flutter

UPDATE: I keep getting an error when i try and use a listView pretty much i need 3 list view on 3 layers of columns and each has a horizontal scrollable list view
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 130.0, color: Colors.red,),
],
)
);
Widget horizontalList2 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 130.0, color: Colors.blue,),
],
)
);
Widget horizontalList3 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 130.0, color: Colors.blue,),
],
)
);
return new Scaffold(
appBar: new AppBar(
title: new Text("Activity"),
),
body: new Center(
child: new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
horizontalList1,
horizontalList2,
horizontalList3,
],
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
So pretty much this should work but i keep getting a mediaquery error and have no clue what i am missing or what's causing the error
When you are using a ListView inside another ListView the first one should have a specific size
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200, //<- Here the height should be specific
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 130.0,
color: Colors.red,
),
],
));
Widget horizontalList2 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200,//<- Here the height should be specific
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 130.0,
color: Colors.blue,
),
],
));
Widget horizontalList3 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200,//<- Here the height should be specific
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 130.0,
color: Colors.blue,
),
],
));
return new Scaffold(
appBar: new AppBar(
title: new Text("Activity"),
),
body: new Center(
child: new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
horizontalList1,
horizontalList2,
horizontalList3,
],
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Your error says MediaQuery.of() was called on a context that does not contain a MediaQuery
It's Because You are using Scaffold for your app's parent widget.But scaffold should be used for a page not an app.
You should use MaterialApp for the parent widget of your app.
#override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
//Your code here
)
);
}

Scroll controller is not attached to any scroll views

I am attaching scrollController to a listView builder. I am controlling scrolling using Slider.B ut I am getting error "Scroll controller is not attached to any scroll views".If I set max of Slider to some static value error is gone but if i set max = scrollController.position.maxScrollExtent it gives error.
scrollController = ScrollController(initialScrollOffset: 0.0);
scrollController.addListener(scrollListener);
Container(
decoration: BoxDecoration(color: Colors.black),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: ListView.builder(
controller: scrollController,
scrollDirection: Axis.horizontal,
itemCount: totalSegments,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 70.0,
width: 148.0,
margin: EdgeInsets.only(top: 10.0),
decoration: BoxDecoration(
color: Colors.grey[800],
),
child: Row(
children: <Widget>[
Container(
width: 20.0,
decoration: BoxDecoration(color: Colors.grey[900]),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 7.0,
height: 7.0,
decoration:
BoxDecoration(color: Colors.white),
),
Container(
width: 7.0,
height: 7.0,
decoration:
BoxDecoration(color: Colors.white),
),
Container(
width: 7.0,
height: 7.0,
decoration:
BoxDecoration(color: Colors.white),
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
margin:
new EdgeInsets.only(top: 1.0, bottom: 1.0),
child: selectedSegment[index] != null
? SizedBox(
height: double.infinity,
width: double.infinity,
child: Center(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
selectedSegment[index]
['segmentUrl']),
),
),
)),
)
: Container(),
),
),
],
),
),
Container(
width: 148.0,
height: MediaQuery.of(context).size.height - 130.0,
child: ListView(
scrollDirection: Axis.vertical,
children: buildSegmentList(index),
),
),
],
);
},
),
),
Try this code i got bottom and up event state in listview..
class ScrollViewDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: ScrollViewTest(),
);
}
}
class ScrollViewTest extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return ScrollViewState();
}
}
class ScrollViewState extends State<ScrollViewTest> {
ScrollController _controller;
String message = "";
_scrollListener() {
if (_controller.offset >= _controller.position.maxScrollExtent &&
!_controller.position.outOfRange) {
setState(() {
message = "reach the bottom";
});
}
if (_controller.offset <= _controller.position.minScrollExtent &&
!_controller.position.outOfRange) {
setState(() {
message = "reach the top";
});
}
}
#override
void initState() {
_controller = ScrollController();
_controller.addListener(_scrollListener);
super.initState();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Scrollview Demo"),
),
body: Column(
children: <Widget>[
Container(
height: 50.0,
color: Colors.green,
child: Center(
child: Text(message),
),
),
Expanded(
child: ListView.builder(
controller: _controller,
itemCount: 30,
itemBuilder: (context, index) {
return ListTile(title: Text("Index : $index"));
},
),
),
],
),
);
}
}

How build a widget with meter with arrow like in photo provided in flutter

I want to create a widget that will build describe in this photo
I already created the meter bar but I still don't know how to add numbers from start to end of bar and a arrow in bottom where place what points you have and with same color above of it
child: Row(children: <Widget>[
Column(children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: Container(
decoration: new BoxDecoration(
border: new Border(right: BorderSide(color: Colors.black))
),
child: Column(
children: <Widget>[
Text('Points'),
Text('38'),
],
),
),
),
],),
// green bar
Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(right:10.0),
child: Container(
width:ratewidth,
decoration: new BoxDecoration(
border: new Border(bottom: BorderSide(color: Colors.green, width: 5.0))
),
),
)
],),
//yellow bar
Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(right:10.0),
child: Container(
width:ratewidth,
decoration: new BoxDecoration(
border: new Border(bottom: BorderSide(color: Colors.yellow, width: 5.0))
),
),
),
],),
...
],)
With a combination of Row, Column and Align it can be done in a few lines.
The hardest part is actually the triangle. Usually, you'll want to use CustomPainter for the triangle, but I was lazy here. So I combined translation, rotation, and a clip.
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: ScoreMeter(
score: 1,
),
)
],
),
);
}
}
class ScoreMeter extends StatelessWidget {
final int score;
ScoreMeter(
{
this.score,
Key key})
: super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
height: 100.0,
child: Row(
children: <Widget>[
Expanded(
child: ScoreMeterItem(
score: score, color: Colors.green, minRange: 0, maxRange: 50),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.yellow,
minRange: 51,
maxRange: 100),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.orange,
minRange: 101,
maxRange: 150),
),
Expanded(
child: ScoreMeterItem(
score: score, color: Colors.red, minRange: 151, maxRange: 200),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.purple,
minRange: 201,
maxRange: 250),
),
Expanded(
child: ScoreMeterItem(
score: score,
color: Colors.brown,
minRange: 251,
maxRange: 300),
),
],
),
);
}
}
class ScoreMeterItem extends StatelessWidget {
/// Hello World
final int score;
final Color color;
final int minRange;
final int maxRange;
ScoreMeterItem(
{this.score,
this.color = Colors.grey,
#required this.minRange,
#required this.maxRange,
Key key})
: assert(minRange != null),
assert(maxRange != null),
super(key: key);
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(minRange.toString(), style: theme.textTheme.caption),
Text(maxRange.toString(), style: theme.textTheme.caption),
],
),
ScoreMeterBar(color: color),
score >= minRange && score <= maxRange
? SizedBox(
height: 10.0,
child: Align(
alignment: Alignment(
(score - minRange) / (maxRange - minRange) * 2 - 1,
0.0),
child: Arrow(color: color),
),
)
: SizedBox()
],
),
);
}
}
class Arrow extends StatelessWidget {
final Color color;
Arrow({this.color});
#override
Widget build(BuildContext context) {
return SizedBox(
height: 5.0,
width: 10.0,
child: ClipRect(
child: OverflowBox(
maxWidth: 10.0,
maxHeight: 10.0,
child: Align(
alignment: Alignment.topCenter,
child: Transform.translate(
offset: Offset(.0, 5.0),
child: Transform.rotate(
angle: pi / 4,
child: Container(
width: 10.0,
height: 10.0,
color: color,
),
),
),
),
),
),
);
}
}
class ScoreMeterBar extends StatelessWidget {
final Color color;
ScoreMeterBar({this.color = Colors.grey, Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 8.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
color: color,
),
);
}
}

how to spacely give the image or text background in complex screen

Hi friends I need to develop the screen like this one
But I am getting below view I tried the expanded but varied differently please help friends I am new to flutter I am not getting any idea how to achieve the required layout
Below is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'ColorsPage.dart';
void main() => runApp(new Login());
class Login extends StatefulWidget{
#override
State<StatefulWidget> createState() {
Login_State login_state() => Login_State();
return login_state();
}
}
class Login_State extends State<Login>{
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Builder(builder: (BuildContext context){
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
child: new Image.asset('assets/rural_post_logo.png'),
decoration: new BoxDecoration(
color: Colors.white
),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: new Text('SIGN IN',style: new TextStyle(
color: Colors.white
),),
decoration: new BoxDecoration(
color: secondarycolor
),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: new Text('SIGN UP',style: new TextStyle(
color: Colors.white
),),
decoration: new BoxDecoration(
color: primarycolor
),
alignment: Alignment(0.0, -1.0),
)
],
);
}),
),
);
}
}
The Column widget over the Container overwrites its normal behavior to be as big as possible and now it just wraps it's content as you noticed. You could give the Container a height property or wrap it in a Padding:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(70.0),
child:
new Container(
child: new Image.asset('assets/rural_post_logo.png'),
decoration: new BoxDecoration(
color: Colors.white
),
alignment: Alignment(0.0, -1.0),
),
),
new Column(
children: <Widget>[
new Container(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: new Text(
'SIGN IN',
style: new TextStyle(color: Colors.white),
),
),
decoration: new BoxDecoration(color: secondarycolor),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: new Text(
'SIGN UP',
style: new TextStyle(color: Colors.white),
),
),
decoration: new BoxDecoration(color: primarycolor),
alignment: Alignment(0.0, -1.0),
)
],
),
],
),

How to use conditional statements/ternary inside a flutter widget

I need to know is it possible to use ternary/if else inside flutter widgets.
I'm trying to create a buttonCreator widget which will take few parameters, one of which will be the background. I need to check whether the widget has background enabled or not. What i have is this but i have no idea how to use it in real dart code.
Container buildButton(String text, bool bg){
return new Container(
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
if (bg != true ? color: Colors.white : '')
),
padding: new EdgeInsets.all(15.0),
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: new Center(
child: new Text(
text, style: new TextStyle(color: Colors.white, fontFamily: 'Monsterrat')
)
),
);
};
I think this is what your question is actually about ?
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
home: new Home(),
));
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Flexible(
child: new MyContainer(
color: Colors.red,
),
),
new Flexible(
child: new MyContainer(
img: "http://www.clker.com/cliparts/F/v/O/6/E/c/cartoon-rubber-duck-hi.png",
),
)
],
),
),
);
}
}
class MyContainer extends StatelessWidget {
String img;
Color color;
MyContainer ({this.img,this.color});
#override
Widget build(BuildContext context) {
return this.img!=null? new Container(
decoration: new BoxDecoration(
image:new DecorationImage(
image: new NetworkImage(this.img)
)
),
): new Container(
decoration: new BoxDecoration(
color: this.color
),
);
}
}
Container buildButton(String text, bool bg){
return new Container(
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
color: bg ? Colors.white : null, // you can use ternary operator here
),
padding: new EdgeInsets.all(15.0),
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: new Center(
child: new Text(
text, style: new TextStyle(color: Colors.white, fontFamily: 'Monsterrat')
)
),
);
};
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
color: bg ? Colors.transparent : Colors.red, // you can use ternary operator here
),
Modified from AleksTi's answer. color property cannot be null.

Resources