Issue
I try to make this type of Text Button anyone know or have any idea about this.
Desired outcome
import 'package:audioplayers/audio_cache.dart';
import "package:flutter/material.dart";
class Mainhome extends StatefulWidget {
Mainhome({Key key}) : super(key: key);
@override
_MainhomeState createState() => _MainhomeState();
}
class _MainhomeState extends State<Mainhome> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: FlatButton(
color: Colors.red,
child: Container(
child: Text(
'One',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
),
),
Expanded(
child: FlatButton(
color: Colors.orange,
child: Container(
child: Text(
'Two',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note2.wav');
},
),
),
Expanded(
child: FlatButton(
color: Colors.purple,
child: Container(
child: Text(
'Three',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note3.wav');
},
),
),
Expanded(
child: FlatButton(
color: Colors.teal,
child: Container(
child: Text(
'Four',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note4.wav');
},
),
),
Expanded(
child: FlatButton(
color: Colors.yellow,
child: Container(
child: Text(
'Five',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note5.wav');
},
),
),
Expanded(
child: FlatButton(
color: Colors.green,
child: Container(
child: Text(
'Six',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note6.wav');
},
),
),
Expanded(
child: FlatButton(
color: Colors.blue,
child: Container(
child: Text(
'Seven',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note7.wav');
},
),
),
Expanded(
child: TextButton(
child: Container(
child: Text(
'Seven',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
final player = AudioCache();
player.play('note7.wav');
},
),
),
],
),
),
),
);
}
}
Solution
You can achieve this UI design by using Stack and Column widgets in flutter.
Find the code snippets below:
class Mainhome extends StatefulWidget {
Mainhome({Key key}) : super(key: key);
@override
_MainhomeState createState() => _MainhomeState();
}
class _MainhomeState extends State<Mainhome> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FlatButton(
color: Colors.red,
child: Container(
height: 80,
alignment: Alignment.center,
child: Text(
'One',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
),
FlatButton(
color: Colors.orange,
child: Container(
height: 80,
alignment: Alignment.center,
child: Text(
'Two',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note2.wav');
},
),
FlatButton(
color: Colors.purple,
child: Container(
height: 80,
alignment: Alignment.center,
child: Text(
'Three',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note3.wav');
},
),
],
),
Positioned(
top: 60,
left: 0,
child: FlatButton(
color: Colors.teal,
child: Container(
height: 40,
width: 150,
alignment: Alignment.center,
child: Text(
'Four',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note4.wav');
},
),
),
Positioned(
top: 140,
left: 0,
child: FlatButton(
color: Colors.yellow,
child: Container(
height: 40,
width: 150,
alignment: Alignment.center,
child: Text(
'Five',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note4.wav');
},
),
)
]),
),
);
}
Answered By – Ashok Kuvaraja
Answer Checked By – Cary Denson (FlutterFixes Admin)