In my page I have a customized Appbar then I want to display a message with icon, and it should be in the center of the page. i mean the customized Appbar is on the top then in the center of the page we have the icon with the message
child: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(children: [
const CustomAppBar("Réglages et paramétrages", true, false,
returnToHistory: true),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment : MainAxisAlignment.center,
children: const [
Icon(Icons.warning, color: Color(0xFFFF9500), size: 100 ,),
],
),
Row(
children: const [
Text(
"be careful",
textAlign: TextAlign.center,)
],
)
],
),
]),
)),
));
you can try doing it this way by using an expanded widget to adjust the flex of the custom appbar and scrollview
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: const CustomAppBar("Réglages et paramétrages", true, false,
returnToHistory: true),
),
Expanded(
flex: 7,
child: Center(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: const [
Icon(
Icons.warning,
color: Color(0xFFFF9500),
size: 100,
),
Text(
"be careful",
textAlign: TextAlign.center,
)
],
),
),
),
),
],
),
),
);
Remove SingleChildScrollView and wrap the inner column with an expanded widget.
You can create custom appbar as widget and provide on Scaffold's appbar. To do this, you need to implements PreferredSizeWidget
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final String title;
const CustomAppBar({
Key? key,
required this.title,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: Text(title),
);
}
#override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
And your layout will be
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const CustomAppBar(title: "Réglages et paramétrages"),
body: SafeArea(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.warning, color: Color(0xFFFF9500)),
Text(
"be careful ",
textAlign: TextAlign.center,
)
],
),
]),
),
),
),
);
}
You can find more about ui/layout on flutter dev .
Related
When scrolling the page, Cursor bubble overlap the other widgets and Appbar. Can you help me?
This GIF file shows my issue
Widget
class Sample extends StatefulWidget {
Sample({Key? key}) : super(key: key);
#override
_SampleState createState() => _SampleState();
}
class _SampleState extends State<Sample> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
extendBodyBehindAppBar: false,
extendBody: false,
appBar: AppBar(
title: Text('AppBar'),
backgroundColor: Colors.orange,
elevation: 0.0,
),
body: SafeArea(
child: Column(
children: [
ListView(
addAutomaticKeepAlives: true,
shrinkWrap: true,
children: [
Container(
color: Colors.yellow,
height: 70,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
'This part want not be scrolled',
style: TextStyle(color: Colors.red),
),
),
)
],
),
Expanded(
child: Scrollbar(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Table(
children: [
TableRow(children: [
Column(
children: [Text('Name')],
),
Column(
children: [
TextFormField(decoration: InputDecoration())
],
)
]),
TableRow(
children: [
Column(
children: [Text('Name')],
),
Column(
children: [
TextFormField(decoration: InputDecoration())
],
)
],
),
TableRow(
children: [
Column(
children: [Text('Name')],
),
Column(
children: [
TextFormField(decoration: InputDecoration())
],
)
],
),
TableRow(
children: [
Column(
children: [Text('Name')],
),
Column(
children: [
TextFormField(decoration: InputDecoration())
],
)
],
),
],
),
],
),
),
),
],
),
),
);
}
}
Table widget is made for non-scrollable GridView. It renders full Table widget tree once and keep its children alive. You can think it is similar like SingleChildScrollView. Here in your Table children generate only once and don't call dispose even though it is not visible on screen, and it is the nature of Table Widget. To test this, you create a statefullWidget and pass it to column children.
For more
Table (Flutter Widget of the Week)
Table-class
Solution
you can simply use ListView.Builder
Is there a way to add a floating action button inside a container? Or at least achieve a similar effect?
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Container(
child: Padding(
child: Column(
children: <Widget>[
Text('Hello'),
SizedBox(height: 30),
Expanded(
child: Container(
child: TaskList(),
),
)
],
),
),
);
}
}
Ps. I can't use scaffold for a few reasons so don't suggest that.
Yes, you can utilize child property of Container
Container (
child: FloatingActionButton()
)
You can use Container in floatingActionButton: after Flutter 2.0
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: GestureDetector(
onTap: (){},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal:15),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColors.accentColor2,
borderRadius: BorderRadius.circular(8)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('Attendence Summary',style: TextStyle(fontWeight: FontWeight.w300,color: Colors.white,fontSize: 12),),
Text('Present : 20 | Absentees : 10',style: TextStyle(color: Colors.white,fontSize: 14),),
],
),
const Text('Review',style: TextStyle(color: Colors.white),)
],
),
),
],
),
)
I am trying to do it with Expanded but I am getting 'RenderFlex children have non-zero flex but incoming width constraints are unbounded.' which is expected because the size of parent is not defined.
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'something',
style: Theme.of(context).primaryTextTheme.headline2,
),
Expanded(
child: Container(),
),
]
)
If your Row is wrapped within an Column widget it will take up all of the available space and give your Row the required Parent width. This will be rendered at the top of the Column.
import 'package:flutter/material.dart';
class TestScreen extends StatelessWidget {
static const routeName = '/testScreen';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'something',
style: Theme.of(context).primaryTextTheme.headline2,
),
Expanded(
child: Container(),
),
],
),
],
),
);
}
}
If you want the widget to take up entire height as well then wrap it again with an Expanded
import 'package:flutter/material.dart';
class TestScreen extends StatelessWidget {
static const routeName = '/testScreen';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Column(
children: <Widget>[
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'something',
style: Theme.of(context).primaryTextTheme.headline2,
),
Expanded(
child: Container(),
),
],
),
),
],
),
);
}
}
If you do not give the Row this fixed area it will expand indefinitely off the side of your screen
Non Column solution
body: SingleChildScrollView(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
'something',
style: Theme.of(context).primaryTextTheme.headline2,
),
Expanded(
child: Container(),
),
],
),
),
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 40.0,
child: Image.asset('images/pic.jpg'),
),
),
Text(
"michael dub",
),
Text("FLUTTER DEVELOPER"),
Container(
width: 350.0,
height: 70.0,
child: Card(
child: Row(
children: <Widget>[
Icon(
Icons.phone,
),
Text(
"+12-345-678-910",
textAlign: TextAlign.center,
),
],
)))
],
),
),
);
}
}
in your column, try crossAxisAlignment: CrossAxisAlignment.stretch
EDIT:
if you're trying to do what I think you're trying to do, try adding
mainAxisAlignment: MainAxisAlignment.center
to your row
you need to wrap your text widget with Expanded widget. Default Row Widget will not take full width and it is creating issue.
Check out following code.
Expanded(
child: Text(
"+12-345-678-910",
textAlign: TextAlign.center,
),
),
I am trying to extract re-use a simple widget that is then referenced in parent widget. The custom widget simply uses a row to layout a textField and a button, and below this I Want to have a listview showing items. I then embed in the customwidget in parent, but it continually throws Error. I have not figured out how to get the custom widget working where I can use ListView or column layout inside. Below is the 2 simplified widgets that demo the issue.
Here is the parent widget, which is where I call the custom widget PlayListControl()
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Playlists'),
),
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.all(20),
child: Text('Test'),
),
PlayListControl(),
],
),
),
drawer: SideDrawer(),
);
}
}
And here is the playlistcontrol widget.
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
child: TextField(),
),
ButtonTheme(
minWidth: 30,
child: RaisedButton(
textColor: Colors.white,
child: Text('add'),
onPressed: () {},
)),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
],
),
)
],
),
);
}
}
No matter what I try, it always complains about layout issue related to height. I would have thought wrapping the ListView in Expanded would solve the issue, but it doesn't. Only if I use a container and specify height do I not get the errors, but I want to use whatever available space there is.
How can I get this playlistcontrol() widget to properly render inside a parent control?
you forgot to wrap the first container of PlayListControl in Expanded widget..
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('My Playlists'),
),
body: Container(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.all(20),
child: Text('Test'),
),
PlayListControl(),
],
),
),
));
}
}
class PlayListControl extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
child: TextField(),
),
ButtonTheme(
minWidth: 30,
child: RaisedButton(
textColor: Colors.white,
child: Text('add'),
onPressed: () {},
)),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
],
),
)
],
),
),
);
}
}