How to make whole screen scrollable include appbar scaffold in flutter

How to make whole screen scrollable include appbar scaffold in flutter - flutter

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

not able to change item of carousel scroller with button in flutter

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

Flutter - Align Items inside a Row - Multiple tiles

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
],
)
],
),
),
....
],
)

Multiple Texts inside a container - how to add 'BTC' Text under the STORE OF VALUE section

// 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),
),
),

dart - flutter single child scroll view changes widget layout of screen

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

How to align TextFields e.g. Text() in a column?

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.

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse

How to make whole screen scrollable include appbar scaffold in flutter - flutter

Related

not able to change item of carousel scroller with button in flutter

Flutter - Align Items inside a Row - Multiple tiles

Multiple Texts inside a container - how to add 'BTC' Text under the STORE OF VALUE section

dart - flutter single child scroll view changes widget layout of screen

How to align TextFields e.g. Text() in a column?

Categories

Resources