It looks like you need help on your screen's layout. Have you tried anything so far and did you encounter any particular issues? I suggest going through the [docs][1] to learn more about working with layouts in Flutter.
For your use case, here's a general view on how we can lay out the widgets on the screen. Containers for alignment and padding won't be included in this overview to keep it simple.
```
Column
- Card
- Column
- Row
- Column
- Text
- Text
- Image
- Text
- ListView
- Card
- Row
- Text
- Checkbox
```
> If select any checkbox the selected item should appear on the right side of the cardview.
I'm not quite sure on what the desired output when the checkbox is ticked. If you can provide more details, I may be able to provide some guidance.
In this sample, values from the checkbox are stored in a HashMap. You may change it as you see fit, depending on your use case.
Here's a sample code that you can play with.
```dart
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> {
Map<String, bool> checkboxValues = {
'List CheckBox 1': false,
'List CheckBox 2': false,
'List CheckBox 3': false,
'List CheckBox 4': false,
'List CheckBox 5': false,
'List CheckBox 6': false,
'List CheckBox 7': false,
'List CheckBox 8': false,
'List CheckBox 9': false,
};
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: new Column(
children: <Widget>[
Card(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
children: [
Row(
children: [
Expanded(
flex: 3,
child: Container(
alignment: Alignment.topLeft,
child: Column(
children: [
Text('Text 1'),
Container(
height: 24,
width: 0,
),
Text('Text 2'),
],
),
),
),
Expanded(
flex: 1,
child: Image(
height: 60,
image: AssetImage('assets/image.png'),
),
),
],
),
Container(
padding: EdgeInsets.fromLTRB(0, 24, 0, 0),
alignment: Alignment.topLeft,
child: Text('Text 3'),
),
],
),
),
color: Colors.white,
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(5),
),
Expanded(
flex: 3,
child: ListView(
children: checkboxValues.keys.map((key) {
return Card(
child: Container(
margin: EdgeInsets.all(18),
child: Row(
children: [
Text(key),
Checkbox(
onChanged: (bool value) {
setState(() {
// store new val of key on HashMap
checkboxValues[key] = value;
});
},
value: checkboxValues[key],
),
],
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(5),
);
}).toList(),
),
),
],
),
);
}
}
```
How the app looks when running
[![demo][2]][2]
[1]: https://flutter.dev/docs/development/ui/layout
[2]: https://i.stack.imgur.com/9xkPv.gif
You need to add - `crossAxisAlignment: CrossAxisAlignment.stretch,` in `Column` so that children can take up horizontal space.
Working Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'MyApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: <Widget>[
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // add this
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
],
),
),
);
}
}
output:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/oiHT6.png
