Related
*Create 20 container widgets side by side using the «wrap» widget
*Leave a 3-pixel space between them horizontally.
*Place the containers in the middle of the screen and type 1-2-3-4-5 in them.
I need to design a container widget in line with the above prompts, but when I ran the code I wrote, I saw that the containers are not side by side? What am I doing wrong?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main()
{runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home:Scaffold(
appBar: AppBar(
title: Text(
"Containers in wraps",
style: TextStyle(color:Colors.greenAccent.shade400),
),
backgroundColor: Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Wrap(
alignment: WrapAlignment.center,
spacing:3.0,
runAlignment: WrapAlignment.center,
runSpacing:3.0,
children: [
Expanded(
child: Container(
color: Colors.grey,
child: Center(
child: Text(
"1",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"2",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"3",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.lightGreen,
child: Center(
child: Text(
"4",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
SizedBox(width:10,),
Expanded(
child: Container(
color: Colors.blue,
child: Center(
child: Text(
"5",
style: TextStyle(color: Colors.red,fontSize: 20),
),
),
),),
],
),
),
),
),
);
}
Instead of Expanded use UnconstraindedBox. Following code should help:
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
"Containers in wraps",
style: TextStyle(color: Colors.greenAccent.shade400),
),
backgroundColor: Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Wrap(
alignment: WrapAlignment.center,
spacing: 3.0,
runAlignment: WrapAlignment.center,
runSpacing: 3.0,
children: [
UnconstrainedBox(
child: Container(
constraints: const BoxConstraints.tightFor(),
color: Colors.grey,
child: const Center(
child: Text(
"1",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"2",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"3",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.lightGreen,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"4",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
const SizedBox(
width: 10,
),
UnconstrainedBox(
child: Container(
color: Colors.blue,
constraints: const BoxConstraints.tightFor(),
child: const Center(
child: Text(
"5",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
),
),
],
),
),
),
),
);
}
I have the below setup:
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Wrap(
children: [
Container(
color: Colors.green,
height: 100,
),
Container(
height: 30,
child: Text(
'Workout name',
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
backgroundColor: Colors.amber),
),
)
],
),
),
);
}
Notice the height: 30 defined in the Container which contains the Text.
It looks like this:
Currently, the text is being clipped from the bottom because of the height: 30 defined in the parent Container. I want it to clip the text from the top instead. How can I do that?
So instead of the top of Workout name being visible, I want the bottom to be visible.
Are you looking for this
return Scaffold(
body: Center(
child: Wrap(
children: [
Container(
color: Colors.green,
height: 100,
),
Container(
height: 30,
child: Stack(
// overflow: Overflow.clip,
children: [
Positioned(
bottom: 0,
child: Text(
'Workout name',
style: TextStyle(
fontSize: 50, fontWeight: FontWeight.bold, backgroundColor: Colors.amber),
),
),
],
),
)
],
),
),
);
Unfortunately there is no way to clip from top. Because the parent's height of text is clearly 30. If you want to achieve this you can use Stack widget instead which will have two children. A Text at first, and above it a container with height of 30 and white color.
It would look like this:
Scaffold(
body: Center(
child: Wrap(
children: [
Container(
color: Colors.green,
height: 100,
),
Stack(
children: [
Text(
'Workout name',
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
backgroundColor: Colors.amber),
),
Container(
height: 30,
color: Colors.white,
),
],
)
],
),
),
)
I wanted to aling a button to the bottom center of the listview.
Scaffold(
backgroundColor: Colors.white,
appBar: buildAppBar(context, ''),
body: ListView(
physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
Spacer(),
buildNextButton(context),
],
),
I tried using Align, but it didn't work, and Spacer() didn't too:
Align(
alignment: Alignment.bottomCenter,
child: buildNextButton(context),
),
is there any way to align buildNextButton to the bottom?
return Scaffold(
body: Stack(
children: [
Positioned(
bottom: 0,
width: MediaQuery.of(context).size.width,
child: Center(
child: MaterialButton(
child: Text("My button"),
onPressed: () {},
color: Colors.red,
),
),
),
ListView(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
)
],
));
You can use Scaffold Properties to make a button centre at the bottom. Hope it would be helpful for you,Thanks
import 'package:flutter/material.dart';
class BottomButton extends StatefulWidget {
const BottomButton({Key? key}) : super(key: key);
#override
_BottomButtonState createState() => _BottomButtonState();
}
class _BottomButtonState extends State<BottomButton> {
#override
Widget build(BuildContext context) {
return Scaffold(
///you can make the centre button use floating action Button and
provide its location
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: Text(
"Button")),
onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
appBar: AppBar(
title: Text("MyAppBar"),
),
body: ListView(
physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
],
),
///bottom sheet place button at bottom without using space
bottomSheet: Container(
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: TextButton(onPressed: () {}, child: Text("Button"))),
);
}
}
You can wrap your Align widget with Expanded and in Align widget use alignment: FractionalOffset.bottomCenter .
Please find below link to get more clear idea - Button at bottom
I suggest to wrap ListView and builtNextButton with Stack Widget.
Because when ListView children is bigger than screen height, button can not be located bottom.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget buildNextButton(context) {
return Container(height: 40, color: Colors.green);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.white,
//appBar: buildAppBar(context, ''),
body: Stack(
children: [
ListView(
physics: const ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: buildNextButton(context),
),
],
),
),
);
}
}
Now the only way you can use it in a list view is if you are to pas it in a column widget, so the order would become, column -> Expanded -> ListView andoutside the expanded, that is where you now pass the button. Just copy and paste my code here, Hopefully it works for you.
Scaffold(
body: Column(
children: [
Expanded(
child: ListView(
// physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
// buildNextButton(context),
],
),
),
Container(
child: Center(
child: buildNextButton()
),
)
],
),
)
and then the buildNextButton code is
buildNextButton() {
return ElevatedButton(
style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20))
,
onPressed: () {},
child: const Text('Enabled'),
);
}
the moment you render a listview as aparent widget, automatically it renders all items in alist, one after the other.
anyquestions, am available to help you out
Good luck bro
I am trying to replicate the AppBar widget as shown in the image below. I tried using Row widget and added the required widgets inside it's children and added crossAxisAlignment: CrossAxisAlignment.center in order to align all the widgets in center (horizontally, as it is a Row widget). But I'm unable to achieve the results, getting A RenderFlex overflowed by 26 pixels on the right. error, (obviously because it is flowing out of the appBar area).
Required:
Mine:
Code:
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
onTap: () { // open drawer },
),
),
);
If anyone could guide me what I'm doing wrong, I would really appreciate it!
Thanks!
Lets try title
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
title: InkWell(
onTap: (){},
child: Row(
children: [
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
SizedBox(width: 10,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
body: Container(
))
with leading
leadingWidth: double.infinity,
leading: InkWell(-------)
output:
The reason why this is happening is that you are using leading property, which has width limitation defined by leadingWidth properly of AppBar, which is 56.0 by default. You can try setting leadingWidth with value double.infinity and that would work.
Alternatively you should re-consider using leading, as its main purpose is some icon or small widget coming before title.
you can replace my source code, please it will work 100%. best of luck!
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: FittedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
));
Facing some difficulties in flutter as I am new to it, how to centerInParent for imageView for flutter? The image is not center, I had use Align but still not working. And how to construct the image and text like this photo ?
appBar: PreferredSize(
preferredSize: Size.fromHeight(45.0),
child: AppBar(
leading: Row(
children: [
Container(
child: GestureDetector(
onTap: () {/* open left menu */},
child: Image.asset("assets/images/ic_title_menu.png", width: 18.0, height: 18.0,)),
padding: EdgeInsets.fromLTRB(14.0, 14.0, 14.0, 14.0),
),
],
),
title: Container(
child: GestureDetector(
onTap: () {/* open search */},
child: Image.asset("assets/images/ic_title_search.png", width: 18.0, height: 18.0,)),
),
actions: <Widget>[
Center(
child: Container(
child: Stack(children: <Widget>[
Align(
alignment: Alignment.center,
child: Image.network(""),)
],),
),
)
],
titleSpacing: 0.0,
automaticallyImplyLeading: false,
),
),
I hope this is something you wanted!
import 'package:flutter/material.dart';
const Color kRed = Colors.red;
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.menu,
color: kRed,
size: 30,
),
SizedBox(width: 10),
Icon(
Icons.search,
color: kRed,
size: 30,
)
],
),
Text(
'Test Text',
style: TextStyle(color: kRed, fontSize: 30),
),
Row(
children: <Widget>[
Column(
children: <Widget>[
Text(
'Test Text',
style: TextStyle(color: kRed, fontSize: 15),
),
Text(
'Test Text',
style: TextStyle(color: kRed, fontSize: 15),
),
],
),
SizedBox(width: 10),
Icon(
Icons.person,
color: kRed,
size: 30,
)
],
)
],
),
),
);
}
}
Just replace the Text Widget in the middle with Image Widget. And tweak with your colors.
App Bar has a property called centerTitle, it will add title on the Appbar center.
centerTitle: true,
Try This
flexibleSpace: Container(
margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: Center(
child: Image(
image: AssetImage('assets/img/icon_1.png'),
))),