Side by side components in flutter - flutter

Question

I am trying to make an icon and text in a container side by side by using a row and a column but I haven't been able to get results I want. On the first picture it's my code and on the second it's what I want to achieve. Any help would be app. Also, how do I implement a divider with a different color? Cheers

Answer 1

You are using TextField in your ReusableCard right?
Sure thing you can make it with Row but in this case this is usually done with suffixIcon property:
TextField(
decoration: InputDecoration(
suffixIcon: Icon(Icons.search),
),
Or you can just wrap children widgets that has to be in a row in a, well Row widget. Here is example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
TextStyle _style = TextStyle(color: Colors.yellow[800], fontSize: 30);
Color _color = Colors.yellow[800];
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
backgroundColor: Colors.blue[800],
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Icon(Icons.done, color: _color),
SizedBox(width: 15),
Text('Electricity', style: _style),
Spacer(),
Icon(Icons.done, color: _color),
SizedBox(width: 15)
],
),
Divider(color: _color),
Row(
children: [
Icon(Icons.done, color: _color),
SizedBox(width: 15),
Text('Internet', style: _style),
Spacer(),
Icon(Icons.done, color: _color),
SizedBox(width: 15)
],
),
Divider(),
],
)),
);
}
}

Answer 2

Spacing / alignment of the icons will be tricky without using Stack, but it could be done with lots of fiddling around with padding/margin.
import 'package:flutter/material.dart';
final bool debug = false;
class RowColLayoutPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Row Col Layout'),
),
body: Column(
children: [
Container(
color: debug ? Colors.lightGreenAccent : null,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: RowIcon(icon: Icons.lightbulb)
),
Expanded(
flex: 2,
child: RowText(text: 'Electricity')
)
],
),
),
RowDivider(),
Container(
color: debug ? Colors.lightGreenAccent : null,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: RowIcon(icon: Icons.microwave_rounded,)
),
Expanded(
flex: 2,
child: RowText(text: 'Internet')
)
],
),
),
RowDivider(),
],
),
);
}
}
class RowIcon extends StatelessWidget {
final IconData icon;
RowIcon({this.icon});
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 2),
decoration: BoxDecoration(
border: debug ? Border.all() : null
),
child: Icon(icon, size: 80,)
);
}
}
class RowText extends StatelessWidget {
final String text;
RowText({this.text});
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: debug ? Border.all() : null
),
child: Text(text, style: TextStyle(fontSize: 40))
);
}
}
class RowDivider extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Divider(thickness: 1, color: Colors.blue, indent: 15, endIndent: 15,);
}
}