Vertically placing two trailing icon in List Tile - flutter

Question

I have placed two arrow icons vertically in a column of a list-tile using trailing option. But I am not able to get the desired rendering. I used the flexible widget to adjust them but the top icon is not moving upwards.
The layout I am getting
This is my code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: ListView(children: <Widget>[
new Container(
color: Colors.lightBlue,
child: ListTile(
title: Text("This is a title"),
subtitle: new Text("This is subtitle"),
trailing: new Container(
color: Colors.yellow,
child: Column(
children: <Widget>[
new Flexible(
flex: 6,
child: new IconButton(
icon: Icon(Icons.arrow_drop_up), onPressed: () {})
),
new Flexible(
flex: 4,
child: new Text("1")
),
new Flexible(
flex: 5,
child: new IconButton(
icon: Icon(Icons.arrow_drop_down),
onPressed: () {})
),
],
),
),
),
)
]),
),
);
}
}
I have the content in the container to show the colours. I want the up arrow at the top of the yellow box.
Please help.

Answer 1

Try this way. But no matter how you do it, the arrows will be very small and inconvenient to use.
Try to create your own widget with a different design to make it more convenient for the user. Maybe something like this.
ListView(children: <Widget>[
new Container(
color: Colors.lightBlue,
child: ListTile(
title: Text("This is a title"),
subtitle: new Text("This is subtitle"),
trailing: new Container(
width: 150,
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(5.0),
topLeft: Radius.circular(5.0)),
color: Colors.black.withOpacity(0.7),
),
child: Center(
child: Icon(Icons.remove,color: Colors.white),
),
width: 50,
),
Container(
width: 50,
color: Colors.white,
child: Center(
child: Text('0'),
),
),
Container(
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(5.0),
topRight: Radius.circular(5.0)),
color: Colors.black.withOpacity(0.7),
),
child: Center(
child: Icon(Icons.add, color: Colors.white,),
),
)
],
)),
),
)
]),
Your code.
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
child: Icon(
Icons.arrow_drop_up,
size: 21,
)),
Text(
"1",
style: TextStyle(fontSize: 12),
),
Container(
child: Icon(
Icons.arrow_drop_down,
size: 21,
)),
],
),