This is my code
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// backgroundColor: Colors.white,
// automaticallyImplyLeading: false,
// ),
body: SingleChildScrollView(
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: 20, bottom: 20),
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
decoration: BoxDecoration(color: const Color(0xff09325E)),
),
Positioned(
top: 85,
child: Container(
width: 470,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15.0)),
child: Container(
// height: 500,
// height: MediaQuery.of(context).size.height - 90,
child: Column(
children: [
SizedBox(
width: 400,
height: 100,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Kasus Tertinggi",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
)),
Divider(color: Color(0xffD3D3D3)),
Column(children: [
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
])
],
),
),
))
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
// Navigator.of(context).pushNamed('/create');
}),
tooltip: 'Add Product',
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
// Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
I have try using singlechild SingleChildScrollView but it's not working, how to make scrollable whole screen include appbar scaffold?
Use CustomScrollView, I did some refactoring to your code
import sliver_tools package for sliverStack
import 'package:sliver_tools/sliver_tools.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
const SliverAppBar(
title: Text(
'AppBAR',
style: TextStyle(color: Colors.indigo),
),
),
SliverPadding(
padding: const EdgeInsets.only(bottom: 20),
sliver: SliverStack(
insetOnOverlap: false,
children: [
SliverToBoxAdapter(
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 20, bottom: 20),
decoration: const BoxDecoration(color: Color(0xff09325E)),
child: const Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
),
),
SliverPositioned.fill(
top: 80,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 8,
color: Color.fromRGBO(0, 0, 0, 0.1),
),
]),
),
),
SliverPositioned.fill(
top: 100,
child: SliverPadding(
padding: const EdgeInsets.fromLTRB(15, 8, 15, 0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) {
return Column(
children: [
Container(
margin: const EdgeInsets.only(top: 100),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: const [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: const [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Divider(color: Color(0xffD3D3D3)),
),
],
);
},
childCount: 6,
),
),
),
),
],
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
Navigator.of(context).pushNamed('/create');
}),
backgroundColor: Colors.indigo,
tooltip: 'Add Product',
child: const Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
//Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
// Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
Related
i have done carousel scrollbar for items array but when i am pressing icon button left or right then i am not able to change item i can change the animated dots with button but the items is not changing with that
Stack(
alignment: Alignment.bottomCenter,
children: [
Stack(
alignment: Alignment.bottomCenter,
children: [
SingleChildScrollView(
child: CarouselSlider(
carouselController:
buttonCarouselController,
items: [
Padding(
padding: const EdgeInsets.fromLTRB(
9, 9, 9, 0),
child: Column(
children: [
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'Pending',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Heat No',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'0C126',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'PRC No',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'IB0975',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Die No',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'M5050',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Part',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'Front Y Slide Casting-LCB',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Grade',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'A356T6',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Quantity',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'4',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.fromLTRB(
6, 6, 6, 0),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Issue Date and Time',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'31-07-2021',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(
9, 9, 9, 0),
child: Column(
children: [
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'Pending2',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.all(6),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Heat No',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'0C126',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
Padding(
padding:
const EdgeInsets.fromLTRB(
6, 6, 6, 0),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
'Issue Date and Time',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
Text(
'31-07-2021',
style: TextStyle(
fontSize: 17,
fontWeight:
FontWeight.w900),
),
],
),
),
],
),
),
],
options: CarouselOptions(
height: 310,
// aspectRatio: 1.1,
viewportFraction: 0.95,
initialPage: 0,
enableInfiniteScroll: true,
autoPlay: true,
autoPlayInterval: Duration(seconds: 4),
autoPlayAnimationDuration:
Duration(milliseconds: 700),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
enlargeFactor: 0.3,
scrollDirection: Axis.horizontal,
onPageChanged: (index, reason) {
setState(() {
activeIndexSub = index;
});
},
)),
),
Padding(
padding: const EdgeInsets.all(15),
child: AnimatedSmoothIndicator(
activeIndex: activeIndexSub,
count: 2,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: IconButton(
onPressed: () {
buttonCarouselController.previousPage();
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.amber,
size: 30,
),
),
),
Flexible(
child: IconButton(
onPressed: () {
buttonCarouselController.nextPage();
},
icon: Icon(
Icons.arrow_forward_ios,
color: Colors.amber,
size: 30,
),
),
),
],
)
],
),
i want to do that when i press button the animatedsmoothindicator will change but also able to scroll item by pressing button
I have the following List.
I would like the scale Icons (on the right) to be aligned.
The top should be in the same spot as the one underneath.
#override
Widget build(BuildContext context) {
return Padding(
padding:
const EdgeInsets.only(left: 0.0, right: 0.0, top: 8.0, bottom: 8.0),
child: Slidable(
endActionPane: ActionPane(motion: StretchMotion(), children: [
//delete option
SlidableAction(
onPressed: deleteTapped,
backgroundColor: Colors.red.shade400,
icon: Icons.delete,
borderRadius: BorderRadius.circular(8),
)
]),
child: Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Color(0xFFD9F0FF),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const Icon(
Icons.date_range_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(date,
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
const Spacer(),
const Text(
"|",
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
const Spacer(),
const Icon(
Icons.monitor_weight_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(weight + " kg",
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
],
),
),
),
);
}
}
I have tried several things, like putting the Icon and the text in a container but with no luck.
Any help appreciate it!
While you are already using Spacer on both Size, you can use
textAlign: TextAlign.center,
const Text(
"|",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
Without spacer, it can be
Expanded(
child: const Text(
"|",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
),
try this:
Column(
children: [
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
//left part
],
),
VerticalDivider(),
Row(
children: [
//right part
],
)
],
),
),
....
],
)
// ignore_for_file: sort_child_properties_last, prefer_const_constructors, prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
class StockPage extends StatelessWidget {
const StockPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.green,
elevation: 0,
title: Text(
'PiyaSync',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
body: GridView(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'STORE OF VALUE',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'SMART CONTRACTS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'DEFI',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'MEMES',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'CENTRALIZED EXCHANGE TOKENS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'NFTS',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
)),
],
),
);
}
}
/*ListView(
children: <Widget>[
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'STORE OF VALUE',
style: TextStyle(
color: Colors.black,
fontSize: 17,
fontWeight: FontWeight.w900),
),
Text(
'SOFTWARE - INFRASTRUCTURE',
style: TextStyle(
color: Colors.black,
fontSize: 13,
fontWeight: FontWeight.w900),
)
],
),
)
],
)*/
/*Column(
children: <Widget>[
Expanded(
child: ListView(
children: [
Text(
'STORE OF VALUE',
style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold),
),
Expanded(
child: Container(
child: Text(
'BTC',
style:
TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
),
color: Colors.green,
padding: EdgeInsets.only(left: 1),
margin: EdgeInsets.all(1),
),
),
],
),
),
],
),*/
/* Container(
width: 210, //360
height: 100, //230
color: Colors.green,
child: Align(
alignment: Alignment.center,
child: Text(
'ETH',
style: TextStyle(
height: -1,
fontWeight: FontWeight.w500,
fontSize: 25,
),
),
),
),*/
/*Padding(
padding: const EdgeInsets.only(right: 260),
child: Container(
height: 265,
color: Colors.white,
alignment: Alignment.topLeft,
child: Column(children: [
Text(
"STORE OF VALUE",
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
),
),
Container(
width: 210, //360
height: 130, //230
color: Colors.green,
child: Align(
alignment: Alignment.center,
child: Text(
'BTC',
style: TextStyle(
height: -1,
fontWeight: FontWeight.w500,
fontSize: 25,
),
),
),
),
Stack(
children: [
Positioned(
left: 20,
top: 20,
child: Container(
height: 200,
width: 200,
color: Colors.black,
child: Text('ETH'),
),
),
],
)
]),
),
),*/
You can use \n for new line and btc will be diaplayed below the other text
Container(
color: Colors.green,
margin: EdgeInsets.all(10),
child: Text(
'STORE OF VALUE\nBTC',
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w500),
),
),
I'm trying to make my flutter page scrollable using the single child scroll view widget. But after doing so the entire widget layout of the screen is messed up. Below I have attached a screenshot of my app, and it shows what i wanted to happen but instead what happened after i used the single child scroll view widget.
import 'package:flutter/material.dart';
import 'package:formula1_app/models/driver_model.dart';
class DriverBioScreen extends StatefulWidget {
final Driver driver;
DriverBioScreen({required this.driver});
#override
_DriverBioScreenState createState() => _DriverBioScreenState();
}
class _DriverBioScreenState extends State<DriverBioScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 1500,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Container(
height: 250,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: Image(
image: AssetImage('assets/images/driver_profile_bg_darken.jpg'),
fit: BoxFit.cover,
)
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 20),
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30,
color: Colors.white,
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 0, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 80,
width: 4,
decoration: BoxDecoration(
color: Colors.blue[800]
),
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.driver.firstName,
style: TextStyle(
fontSize: 25,
color: Colors.white
),
),
Text(
widget.driver.lastName,
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Row(
children: [
Text(
widget.driver.number,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
' | ${widget.driver.team}',
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
)
],
)
],
),
),
],
),
Image(
image: AssetImage(widget.driver.driverImageUrl),
height: 200, // 200
width: 200, //200
),
],
),
),
)
],
),
),
Column(
children: [
Column(
children: [
Text(
"Achievements",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold
),
),
Padding(
padding: EdgeInsets.only(top: 0, left: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 400,
width: 228,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Wins',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
Text(
'Podiums',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
Text(
'DHL Fastest Laps',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Text(
'Grands Prix Entered',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Text(
'World Championships',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 80),
child: Container(
height: 400,
width: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
(widget.driver.wins),
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
widget.driver.podiums,
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 25),
child: Text(
widget.driver.fastestLap,
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 40),
child: Text(
widget.driver.gpEntered,
style: TextStyle(
fontSize: 30
),
),
),
Padding(
padding: EdgeInsets.only(top: 59),
child: Text(
widget.driver.worldchampionships,
style: TextStyle(
fontSize: 30,
),
),
),
],
),
),
)
],
),
),
Column(
children: [
Text(
'Team',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold
),
),
// Image(
// image: AssetImage(widget.driver.team),
// )
],
),
],
),
],
)///,
],
),
)
);
}
}
This is a screenshot of what I wanted
This is what happens after i added the singlechildscrolview widget
You can use ListView
class _DriverBioScreenState extends State<DriverBioScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Container(
height: 1500,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Container(
height: 250,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(30),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: Image(
image: AssetImage(
'assets/images/driver_profile_bg_darken.jpg'),
fit: BoxFit.cover,
)),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 20),
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30,
color: Colors.white,
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 0, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 80,
width: 4,
decoration:
BoxDecoration(color: Colors.blue[800]),
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.driver.firstName,
style: TextStyle(
fontSize: 25, color: Colors.white),
),
Text(
widget.driver.lastName,
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Row(
children: [
Text(
widget.driver.number,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Text(
' | ${widget.driver.team}',
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
)
],
)
],
),
),
],
),
Image(
image: AssetImage(widget.driver.driverImageUrl),
height: 200, // 200
width: 200, //200
),
],
),
),
)
],
),
),
Column(
children: [
Column(
children: [
Text(
"Achievements",
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 0, left: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 400,
width: 228,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Wins',
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold),
),
Text(
'Podiums',
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold),
),
Text(
'DHL Fastest Laps',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
),
Text(
'Grands Prix Entered',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
),
Text(
'World Championships',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 80),
child: Container(
height: 400,
width: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
(widget.driver.wins),
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 29),
child: Text(
widget.driver.podiums,
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 25),
child: Text(
widget.driver.fastestLap,
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 40),
child: Text(
widget.driver.gpEntered,
style: TextStyle(fontSize: 30),
),
),
Padding(
padding: EdgeInsets.only(top: 59),
child: Text(
widget.driver.worldchampionships,
style: TextStyle(
fontSize: 30,
),
),
),
],
),
),
)
],
),
),
Column(
children: [
Text(
'Team',
style: TextStyle(
fontSize: 32, fontWeight: FontWeight.bold),
),
// Image(
// image: AssetImage(widget.driver.team),
// )
],
),
],
),
],
)
///,
],
),
);
}
}
wrap Image widget with Expanded
Expanded(
child:Image(
image: AssetImage(widget.driver.driverImageUrl),
height: 200, // 200
width: 200, //200
),
),
because your Image widget is taking all the space
I'm trying to draw a Dialog/Popup that will show when user taps on a marker in google map.
The problem is that the Text-Fields doesn't align in the Dialog. You can see it below in the image:
So, I wonder how I could align the text so each new text begins at a line vertically.
And here is my code for it:
child: Material(
color: Colors.transparent,
child: ScaleTransition(
scale: scaleAnimation,
child: Container(
decoration: ShapeDecoration(
color: Colors.blueGrey[900],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0))),
child: Padding(
padding: const EdgeInsets.fromLTRB(40, 20, 40, 15),
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
'Stackoverflow Restaurant',
style: new TextStyle(
fontSize: 20.0,
color: textColorPopup,
fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Text(
'Open hours',
style: new TextStyle(
fontSize: fontSizeWeekDays, color: textColorPopup),
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'MON',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'TUE',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'WEN',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'THU',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'FRI',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'SAT',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 30),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'SUN',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
RaisedButton(
padding: EdgeInsets.fromLTRB(60, 0, 60, 0),
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
onPressed: _dismissAlertDialog,
child: Text(
'CLOSE',
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontStyle: FontStyle.normal),
),
),
],
),
),
),
),
),
),
use mainAxisAlignment: MainAxisAlignment.spaceBetween on each Row and the Days will align left and the Times will align right.