My text widget "More" always stays on top even though I scroll down, I'm not finding the root of this issue,
I've tried wrapping it in a SingleChildScrollView widget but still nothing has changed, are there any arguments for the Text widget that allows it to scroll as the user scrolls that I don't know of? Or is it something else entirely?
Code:
class MorePage extends StatefulWidget {
#override
_MorePageState createState() => _MorePageState();
}
class _MorePageState extends State<MorePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: white,
body: Stack(
// YESSSS
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center, children: [
SizedBox(height: 45.0),
Padding(
padding: const EdgeInsets.symmetric(horizontal: kDefaultPaddin),
child: SizedBox(
height: 25,
child: Text(
"MORE",
style: TextStyle(
color: black,
fontFamily: "Raleway",
fontWeight: FontWeight.w700,
fontSize: 25),
textAlign: TextAlign.center,
),
),),
]),
Container(
// YESSSS
child: getBody(),
),
],
),
);
}
You are using Stack(), Stack will overlay children on top of others.
while using Stack wrap with fixed-Sized Widget, It can be just Container(), also while using Stack, use Aligning widgets as child => Center, Align, Positioned, else use stack fit property,
to know more about Stack Visit https://api.flutter.dev/flutter/widgets/Stack-class.html
import 'package:flutter/material.dart';
class MorePage extends StatefulWidget {
#override
_MorePageState createState() => _MorePageState();
}
class _MorePageState extends State<MorePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Container(
child: Stack(
// YESSSS
children: <Widget>[
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
SizedBox(height: 45.0),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 22),
child: SizedBox(
height: 25,
child: Text(
"MORE",
style: TextStyle(
color: Colors.black,
fontFamily: "Raleway",
fontWeight: FontWeight.w700,
fontSize: 25),
textAlign: TextAlign.center,
),
),
),
]),
Center(
child: Container(
color: Colors.amber,
// YESSSS
height: 1333,
child: Text("Body")
// getBody(),
),
),
],
),
),
),
);
}
}
Related
I have an Elevated Button which is on of the bottom of the Page and I am a beginner sorry for this silly doubts but i can't figure out how to change the position of the button I dont know how to try positioned widget too. Kindly help me
I tried positioned widget but couldn't do well can anyone help me with this. here is my full code.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: PageView.builder(
itemBuilder: (context, index)=> const OnBoardContent(
image: 'assets/splash-1.png',
description: "All under one roof with different approach"),
),
),
SizedBox(
height: 30,
width: 200,
child: ElevatedButton(
onPressed: (){},
child: const Text("Tap to get started"),
),
),
],
)
),
);
}
}
class OnBoardContent extends StatelessWidget {
const OnBoardContent({
Key? key,
required this.image,
required this.description,
}) : super(key: key);
final String image, description;
#override
Widget build(BuildContext context) {
return Column(
children: [
const SizedBox(
height: 160,
),
const Text("Naz-Kearn",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
)),
const Text("A simplify learning App",
style: TextStyle(
fontWeight: FontWeight.normal
),
),
Image.asset(image),
const SizedBox(
height: 50,
),
Text(description,
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.normal),
),
],
);
}
}
Output of the above code
You need your widgets in a stack if you want to use Positioned widget on them :
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack( //wrapped the whole column with a stack so that all the other widgets doesn't get disturbed
children: [
Column(
children: [
Expanded(
child: PageView.builder(
itemBuilder: (context, index)=> const OnBoardContent(
image: 'assets/splash-1.png',
description: "All under one roof with different approach"),
),
),
],
),
Positioned(
top: MediaQuery.of(context).size.height*0.7, //change the 0.7 part to any number you like
child: SizedBox(
height: 30,
width: 200,
child: ElevatedButton(
onPressed: (){},
child: const Text("Tap to get started"),
),
),
),
],
)
),
);
}
}
class OnBoardContent extends StatelessWidget {
const OnBoardContent({
Key? key,
required this.image,
required this.description,
}) : super(key: key);
final String image, description;
#override
Widget build(BuildContext context) {
return Column(
children: [
const SizedBox(
height: 160,
),
const Text("Naz-Kearn",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
)),
const Text("A simplify learning App",
style: TextStyle(
fontWeight: FontWeight.normal
),
),
Image.asset(image),
const SizedBox(
height: 50,
),
Text(description,
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.normal),
),
],
);
}
}
try this code, you can use alignment property of the Stack widget to center everything.
SafeArea(
child: Stack(
alignment: Alignment.center, //do this
children: [
You can wrap your button with Padding widget which helps you to add padding as you like
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: PageView.builder(
itemBuilder: (context, index)=> const OnBoardContent(
image: 'assets/splash-1.png',
description: "All under one roof with different approach"),
),
),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
height: 30,
width: 200,
child: ElevatedButton(
onPressed: (){},
child: const Text("Tap to get started"),
),
),),
],
)
),
);
}
Firstly please mention what precisely the issue you are facing. If you have a problem with the get started button, what is the expected place for the get started button in the design?
Based on the code given, I'm hoping that the get started button should be at the bottom of the screen with some space below. You have already placed the button at the bottom, but you are not able to give space below.
There are some possible ways, you can use it with the get started button component.
Instead of this,
SizedBox(
height: 30,
width: 200,
child: ElevatedButton(
onPressed: (){},
child: const Text("Tap to get started"),
),
),
Option 1
Use container with margin
Container(
height: 30,
width: 200,
margin: EdgeInsets.only(
bottom: 50,
),
child: ElevatedButton(
onPressed: () {},
child: const Text("Tap to get started"),
),
),
Option 2
Wrap existing SizedBox with padding widget
Padding(
padding: EdgeInsets.only(bottom: 50.0),
child: Sizedbox(
height: 30,
width: 200,
child: ElevatedButton(
onPressed: () {},
child: const Text("Tap to get started"),
),
),
),
Even with some more ways to move the button wherever you need, you can try your own with the following widgets Expanded(), Spacer(), SizedBox(), Positioned() and etc.
I want to align the text "2022" on the bottom of the screen while keeping the image and its neighbor text at the center of the screen.
class SplashScreen extends StatelessWidget {
const SplashScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Globalcolors.mainColor,
body: Container(
padding: const EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Image.asset(
'assets/images/splash_logo.png',
color: Colors.white,
),
),
const Padding(
padding: EdgeInsets.all(50),
child: Text(
'Sample Text',
style: TextStyle(
color: Colors.white,
fontSize: 36,
fontFamily: 'MouseMemoirs'),
),
),
const Text(
'2022',
style: TextStyle(color: Colors.white, fontSize: 12),
),
],
),
),
);
}
}
I tried to use this link to solve the problem. I used Expanded:
const Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Text(
'2022',
style: TextStyle(color: Colors.white, fontSize: 12),
),
),
)
But, The result is not good:
You can user Stack and column widgets like
Stack(
children: [
Column(), // contains the image and title
Align(
alignment: Alignment.bottomCenter,
child: Text("2022"),
),
]
)
You can also use Positioned widget to align the text 2022
you can use the bottom method that comes with the scaffold
Scaffold(
bottom : Text("2020")
)
this will make the text always on the bottom of the screen
I'm trying to develop a clone of an App idea from dribble, which can be found here.
Can you please tell me is the code I'm trying to write is correct or not??
As I've tried to wrap a Column with two text Widgets Enclosed in Container ( separate ) and when I'm trying to change the width of one container It changes the margin of the other also.
My Code is :-
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 30, left: 20),
child: const Text(
'Find Intrested Events to Join',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0,
wordSpacing: 2,
),
),
width: 200,
),
// -----------------------------------------------------------------
Container(
margin: EdgeInsets.only(left: 20, top: 20),
width: 220,
child: Text(
'We share all events like Charity, workshop, Blood drive, etc.',
style: TextStyle(wordSpacing: 2, height: 1.4),
),
)
],
),
),
);
Can you tell me How to achieve that stage that I can change the Containers' width without affecting the margin of others.
It will be better to use Stack for this case while it contains background image, Also learn more about Stack, Align, Positioned and LayoutBuilder from flutter.dev
Play with this widget ,
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Container(
color: Colors.amber.withOpacity(.4),
), //background image
Positioned(
left: 20,
top: 30,
child: SizedBox(
width: constraints.maxWidth * .5, // 50% of width
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Find Intrested Events to Join',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0,
wordSpacing: 2,
),
),
SizedBox(
height: 20,
), //spaces between text
Text(
'We share all events like Charity, workshop, Blood drive, etc.',
style: TextStyle(wordSpacing: 2, height: 1.4),
),
],
),
),
),
Align(
// also Postisioned can be use
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("hereh"),
ElevatedButton(onPressed: () {}, child: Text("Button"))
],
),
)
],
);
},
)),
);
}
}
Hi All I am learning flutter and I want the text to be align-center inside the column but the property crossAlignmentCenter is not working can anyone look and told what i am doing wrong here
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Padding(
padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Text("Log In", style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),),
)
],
),
),
backgroundColor: Colors.teal,
);
}
}```
You need to wrap the Column widget with a SizedBox or a Container with the width of double.infinity. This allows Column to extend as much as the parent allows.
Replace Padding widget with this,
Container(
width: double.infinity,
padding: const EdgeInsets.only(left: 32, right: 32, top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Log In",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),
)
],
),
),
The reason is that by default columns do not take all available space on the cross axis. So in your example, the column is only as thick as the child it holds. Therefore centering it does not change anything. If you are looking for a solution go to Why CrossAxisAligment not Working in Flex,Row and Column?
If you are expecting to make it the vertical center of the column add mainAxisAlignment for your column widget.
mainAxisAlignment: MainAxisAlignment.center,
If want to have it horizontal center replace your column widget to row and make sure to set mainAxisAlignment and crossAxisAlignnment to center
you can wrap your Text widget inside an Align widget to do this. this is your fixed code:
import 'package:flutter/cupertino.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Padding(
padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Align(
alignment: Alignment.center,
child:Text("Log In", style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),)
) ,
)
],
),
),
backgroundColor: Colors.teal,
);
}
}
i'm very new to Flutter.
I have a stateful widget. Every time i click a counter, the whole build function runs and the results are updated.
But is there a way to make it a stateless widget and update only the relevant part somehow so i could avoid rebuilding the screen?
I have a stateful widget. Every time i click a counter, the whole build function runs and the results are updated.
But is there a way to make it a stateless widget and update only the relevant part somehow so i could avoid rebuilding the screen?
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home:Home(),
));
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State {
int long = 0;
void increaseCounter(){
setState(() {
long++;
});
}
void decreaseCounter(){
if(long > 0) {
setState(() {
long--;
});
}
}
Text numberOfDeliveries(){
return Text(
'$long deliveries today',
style: TextStyle(
color:Colors.white,
fontSize: 24.0,
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('Deliveries'),
backgroundColor: Colors.green,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child:Padding(
padding: const EdgeInsets.symmetric(vertical: 32.0, horizontal: 0.0),
child: Text(
'Long',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32.0,
color: Colors.white,
),
),
),
),
Expanded(
child:
// is it possible to update this without running the whole build again?
numberOfDeliveries(),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(vertical: 32.0, horizontal: 0.0),
color:Colors.blue[100],
child: FlatButton(
onPressed: (){
decreaseCounter();
},
child: Text('-'),
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(vertical: 32.0, horizontal: 0.0),
color:Colors.blue[500],
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(vertical: 32.0, horizontal: 0.0),
color:Colors.blue[900],
child: FlatButton(
onPressed: (){
increaseCounter();
},
child: Text('+'),
),
),
),
],
),
),
],
),
),
),
Expanded(
child: Container(
color: Colors.blue[800],
child: Row(
children: [
Text('Bottom'),
],
),
),
),
],
),
);
}
}