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');
},
),
),
],
),
),
),
);
}
}
Hmmm, are you trying to create a short button with left Alignment?
Just do this
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FlatButton(
minWidth:200,
color: Colors.red,
child: Text('One',style: TextStyle(color: Colors.white, fontSize: 25),),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
),
//your other button
],
);
Notes: FlatButton is already Deprecated on flutter 2.0.3 using TextButton
Instead
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');
},
),
)
]),
),
);
}
Your UI seems like a nice piano keyboard right? Here's a skeleton you can try with. Put it simple you can use the Stack
and Positioned
to achieve the desire UI.
Full example code:
import 'package:audioplayers/audio_cache.dart';
import "package:flutter/material.dart";
main() {
runApp(MaterialApp(
home: Mainhome(),
));
}
class Mainhome extends StatefulWidget {
Mainhome({Key key}) : super(key: key);
@override
_MainhomeState createState() => _MainhomeState();
}
class _MainhomeState extends State<Mainhome> {
double adjustment = 50;
int _currentIndex = 0;
int keySizeNumber = 7;
double bigKeySize;
double smallKeySize;
@override
Widget build(BuildContext context) {
bigKeySize = MediaQuery.of(context).size.height / keySizeNumber;
smallKeySize = bigKeySize * 0.6;
return MaterialApp(
home: SafeArea(
child: Container(
color: Colors.white,
padding: EdgeInsets.symmetric(vertical: 10),
child: Stack(
children: [
Column(
children: List<Widget>.generate(7, (index) => _buildBigKey()),
),
Positioned(
top: bigKeySize * 0.6,
child: _buildSmallKey(),
),
Positioned(
top: bigKeySize * 0.6 * 2 + 50,
child: _buildSmallKey(),
),
Positioned(
top: bigKeySize * 0.6 * 5 + 50,
child: _buildSmallKey(),
),
Positioned(
top: bigKeySize * 0.6 * 7 + 25,
child: _buildSmallKey(),
),
Positioned(
top: bigKeySize * 0.6 * 9 - 10,
child: _buildSmallKey(),
),
],
),
),
),
);
}
_buildBigKey() {
return Expanded(
child: FlatButton(
child: Container(
alignment: Alignment.center,
height: bigKeySize,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border: Border.all(color: Colors.red), color: Colors.white),
child: Text(
'Key',
style: TextStyle(color: Colors.red, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
),
);
}
_buildSmallKey() {
return FlatButton(
child: Container(
alignment: Alignment.center,
height: smallKeySize,
width: MediaQuery.of(context).size.width * 0.7,
decoration: BoxDecoration(
border: Border.all(color: Colors.red), color: Colors.white),
child: Text(
'Key',
style: TextStyle(color: Colors.red, fontSize: 25),
),
),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.