As you can see in Picture 1 & 2 the List scrolls under the transparent SliverAppBar. Is there any possibility to let the SliverAppBar stay transparent and don't show the List underneath?
(As you can see in Picture 1 & 2 the List scrolls under the transparent SliverAppBar. Is there any possibility to let the SliverAppBar stay transparent and don't show the List underneath?)
// ignore_for_file: unused_local_variable
import 'dart:ui';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title = "Hallo"}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage("lib/assets/images/Bg.png"),
),
),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage(
"lib/assets/images/Bg2.png",
),
scale: 1.05,
),
),
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxISScrolled) => [
SliverAppBar(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
floating: true,
snap: false,
pinned: true,
title: //Startseite
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Startseite",
style: TextStyle(color: Colors.black),
),
//Notification
Row(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 197, 193, 193),
Color.fromARGB(255, 167, 156, 156)
.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12)),
padding: EdgeInsets.all(2),
child: Icon(Icons.notifications),
),
SizedBox(width: 10),
//Profile
ClipOval(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFFFFFFF),
Color(0xFF000000).withOpacity(0),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
padding: EdgeInsets.all(10),
child: Container(
width: MediaQuery.of(context).size.width * 0.06,
height: MediaQuery.of(context).size.height * 0.03,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: ExactAssetImage(
'lib/assets/images/baki.jpg'),
fit: BoxFit.fill,
),
),
),
),
),
],
),
],
),
bottom: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.transparent,
title: Container(
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Container(
width:
MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height *
0.025,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF4B4646).withOpacity(0.6),
Color(0xFFFFFFFF).withOpacity(0.2),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5.0),
child: Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
"Suchen",
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: "Acme-Regular",
color: Colors.grey.shade200,
fontSize: 10),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 170.0,
),
child: Container(
decoration: BoxDecoration(
color:
Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
padding: EdgeInsets.all(5),
child: Icon(Icons.search,
size: 20, color: Colors.green),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
child: Icon(Icons.filter_alt,
size: 22, color: Colors.green),
),
),
],
),
),
),
),
],
body: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
),
),
),
);
}
}
1:
2:
Related
I am currently working on my own App and want to make this custom AppBar. Can somebody help me doing this?
MY main Problem is, the transparent Background and my ListView going under it which looks really bad. Is there any possibility to let the background trasnparent but don't show the List at the top?
// ignore_for_file: unused_local_variable
import 'dart:ui';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title = "Hallo"}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage("lib/assets/images/Bg.png"),
),
),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage(
"lib/assets/images/Bg2.png",
),
scale: 1.05,
),
),
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxISScrolled) => [
SliverAppBar(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
floating: true,
snap: false,
pinned: true,
title: //Startseite
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Startseite",
style: TextStyle(color: Colors.black),
),
//Notification
Row(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 197, 193, 193),
Color.fromARGB(255, 167, 156, 156)
.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12)),
padding: EdgeInsets.all(2),
child: Icon(Icons.notifications),
),
SizedBox(width: 10),
//Profile
ClipOval(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFFFFFFF),
Color(0xFF000000).withOpacity(0),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
padding: EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: ExactAssetImage(
'lib/assets/images/baki.jpg'),
fit: BoxFit.fill,
),
),
),
),
),
],
),
],
),
bottom: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.transparent,
title: Container(
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Container(
width:
MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height *
0.025,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFF4B4646).withOpacity(0.6),
Color(0xFFFFFFFF).withOpacity(0.2),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5.0),
child: Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
"Suchen",
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: "Acme-Regular",
color: Colors.grey.shade200,
fontSize: 10),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 170.0,
),
child: Container(
decoration: BoxDecoration(
color:
Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
padding: EdgeInsets.all(5),
child: Icon(Icons.search,
size: 20, color: Colors.green),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
child: Icon(Icons.filter_alt,
size: 22, color: Colors.green),
),
),
],
),
),
),
),
],
body: Expanded(
child: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
),
),
),
),
);
}
}
[
This is my Result so far
This is my Result so far
you can add these lines of code to remove the backgroundColor from AppBar widget.
backgroundColor: Colors.transparent,
elevation: 0
If you want to implement it from zero, you can use a Row with 2 children. First child (a Text) for the title and the second one (a Row) for buttons. Don't remember to set mainAxisAlignment to MainAxisAlignment.spaceBetween.
I hope this help you
Here is the code:
import 'dart:ui';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, this.title = "Hallo"}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
// color: Colors.cyan,
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage("lib/assets/images/Bg.png"),
),
),
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.topRight,
image: AssetImage(
"lib/assets/images/Bg2.png",
),
scale: 1.05,
),
),
child: CustomScrollView(
slivers: [
SliverAppBar(
elevation: 0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
floating: false,
snap: false,
pinned: true,
stretch: true,
actions: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color.fromARGB(255, 197, 193, 193),
const Color.fromARGB(255, 167, 156, 156)
.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.all(2),
child: const Icon(Icons.notifications),
),
const SizedBox(width: 10),
//Profile
ClipOval(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFFFFFFFF),
const Color(0xFF000000).withOpacity(0),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
),
padding: const EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: const DecorationImage(
image:
ExactAssetImage('lib/assets/images/baki.jpg'),
fit: BoxFit.fill,
),
),
),
),
),
],
title: const Text(
"Startseite",
style: TextStyle(color: Colors.black),
),
bottom: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.transparent,
title: Container(
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 3.0),
child: Container(
width:
MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height *
0.025,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF4B4646)
.withOpacity(0.6),
const Color(0xFFFFFFFF)
.withOpacity(0.2),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5.0),
child: Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
"Suchen",
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: "Acme-Regular",
color: Colors.grey.shade200,
fontSize: 10),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 170.0,
),
child: Container(
decoration: BoxDecoration(
color:
Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.all(5),
child: const Icon(Icons.search,
size: 20, color: Colors.green),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade300.withOpacity(0.4),
borderRadius: BorderRadius.circular(12)),
child: const Icon(Icons.filter_alt,
size: 22, color: Colors.green),
),
),
],
),
),
),
),
SliverFillRemaining(
child: Expanded(
child: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
),
),
],
),
),
),
);
}
}
I trying to understand how can I design curves in a container like the below
can anyone help me to design this kind of container? much appreciate it if anyone provides code for this kind of design.
Thank you in advance.
use Stack and boxDecoration, play with margins and size to get best result.
SizedBox(
width: double.infinity,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.grey,
boxShadow: const [
BoxShadow(color: Colors.grey, spreadRadius: 3),
],
),
height: 50,
),
Container(
width: 200,
child: const Center(
child: Text('\$1400'),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: const Color(0xff232fac),
boxShadow: const [
BoxShadow(color: Color(0xff232fac), spreadRadius: 3),
],
),
height: 50,
),
Container(
width: 200,
margin: const EdgeInsets.only(left: 150),
child: const Center(
child: Text('\$1400'),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: const Color(0xff483395),
boxShadow: const [
BoxShadow(color: Colors.white, spreadRadius: 3),
],
),
height: 50,
),
],
),
),
read about Stack
read about boxDecoration
You cab usethe decoration property of the container to add border radius to a container
Container(
height: 25,
width: 100,
decoration: BoxDecoration (
borderRadius : BorderRadius circular(15),
color: Colors.purple
)
)
Use Stack and gradient to implement this
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.grey,
],
stops: [0.5, 0],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("\$1400"),
Text("\$700"),
],
),
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
color: Colors.green,
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Text("\$700"),
),
),
],
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.grey,
],
stops: [0.5, 0],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("\$1400"),
Text("\$700"),
],
),
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
color: Colors.green,
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Text("\$700"),
),
),
],
You can try something like this:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
final double center = 300;
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: [
Positioned(
left: 0,
child: Container(
width: center,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.indigo, Colors.blue]),
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'\$ 1400',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
)),
Positioned(
right: 0,
child: Container(
width: MediaQuery.of(context).size.width - center,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'\$ 900',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
)),
Positioned(
left: center,
child: FractionalTranslation(
translation: const Offset(-0.5, 0),
child: Container(
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.indigo, Colors.purple]),
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 8, 20, 8),
child: Text(
'\$ 700',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
),
)),
]),
);
}
}
output:
use decoration property see simple use.
Container(
height: 50,
width: 500,
decoration: BoxDecoration (
borderRadius : BorderRadius circular(40),
color: Colors.red)
child: const Center(
child: Text('\$ 1400'),),
)
i try to run on devices
code:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
// ignore: camel_case_types
class profileScreen extends StatefulWidget {
profileScreen({Key key}) : super(key: key);
#override
_profileScreen createState() => _profileScreen();
}
// ignore: camel_case_types
class _profileScreen extends State<profileScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: profileView()
);
}
Widget profileView() {
return Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(30, 50, 30, 30),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(height: 50, width: 50 ,child:
Icon(Icons.arrow_back_ios, size: 24,color:
Colors.black54,), decoration:
BoxDecoration(border: Border.all(color:
Colors.black54), borderRadius:
BorderRadius.all(Radius.circular(10))),),
Text('Profiles details', style:
TextStyle(fontSize: 18, fontWeight:
FontWeight.bold),),
Container(height: 24,width: 24)
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0,0 ,50),
child: Stack(
children: <Widget>[
CircleAvatar(
radius: 70,
child: ClipOval(child: Image.asset('', height: 150, width: 150, fit: BoxFit.cover,),),
),
Positioned(bottom: 1, right: 1 ,child: Container(
height: 40, width: 40,
child: Icon(Icons.add_a_photo, color: Colors.deepOrange,),
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.all(Radius.circular(20))
),
))
],
),
),
Expanded(child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(30), topRight: Radius.circular(30)),
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.black54, Color.fromRGBO(0, 41, 102, 1)]
)
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20, 25, 20, 4),
child: Container(
height: 60,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Name', style: TextStyle(color: Colors.white70),),
),
), decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20)),border: Border.all(width: 1.0, color: Colors.white70)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 5, 20, 4),
child: Container(
height: 60,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Email', style: TextStyle(color: Colors.white70),),
),
), decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20)),border: Border.all(width: 1.0, color: Colors.white70)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 5, 20, 4),
child: Container(
height: 60,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Type something about yourself', style: TextStyle(color: Colors.white70),),
),
), decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20)),border: Border.all(width: 1.0, color: Colors.white70)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 5, 20, 4),
child: Container(
height: 60,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Phone number', style: TextStyle(color: Colors.white70),),
),
), decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20)),border: Border.all(width: 1.0, color: Colors.white70)),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomRight,
child: Container( height: 70, width: 200,
child: Align(child: Text('Save', style: TextStyle(color: Colors.white70, fontSize: 20),),),
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30),)
),
),
),
)
],
),
))
],
);
}
}
Exception caught by widgets library The following assertion was
thrown building Builder(dirty): A build function returned null.
The offending widget is: Builder Build functions must never return
null.
To return an empty space that causes the building widget to fill
available room, return "Container()". To return an empty space that
takes as little room as possible, return "Container(width: 0.0,
height: 0.0)".
The relevant error-causing widget was: MaterialApp
file:///C:/Users/PC-Admin/Desktop/faceadmin/lib/main.dart:15:12 When
the exception was thrown, this was the stack:
#0 debugWidgetBuilderValue. (package:flutter/src/widgets/debug.dart:302:7)
#1 debugWidgetBuilderValue (package:flutter/src/widgets/debug.dart:323:4)
#2 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4632:7)
#3 Element.rebuild (package:flutter/src/widgets/framework.dart:4343:5)
#4 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4606:5)
The snippet worked for me. The only problem I think might be the formatting/indentation or something up with flutter. Try running flutter clean and then running the project.
I have an input screen developed in flutter where i need to get the user image uploaded/selected. for this in the Screen UI i want to have a design like this in the picture.
The code and what i have come up with the screen background is as follows. How can i add this kind of a circle in my code to enable image selection.
final form =
Container(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 4.0),
child: Column(
children: <Widget>[
SizedBox(height: 12.0),
title,
SizedBox(height: 16.0),
email,
SizedBox(height: 12.0),
userName,
SizedBox(height: 12.0),
password,
SizedBox(height: 12.0),
address,
SizedBox(height: 12.0),
country_dropdown,
SizedBox(height: 12.0),
phone,
SizedBox(height: 24.0),
continue_btn,
],
),
), ),
);
final body = Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.5, 1.0],
colors: [
Color(0xFF03B898),
Color(0xFF01816B),
],
),
),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child: Center(
child: Image.asset(
'assets/images/pawfect_logo.png',
height: 150.0,
width: 150.0,
fit: BoxFit.contain,
),
),
),
),
Expanded(
flex: 4,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(50),
),
),
child: form, //Text('this text here'),
),
),
],
),
));
return Scaffold(
body: body,
);```
Check out this example :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
final form = Container(
height: MediaQuery.of(context).size.height*0.75,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 4.0),
child: Column(
children: <Widget>[
SizedBox(height: 90.0),
Text('Name'),
SizedBox(height: 16.0),
Text('email'),
SizedBox(height: 12.0),
Text('username'),
SizedBox(height: 12.0),
Text('password'),
SizedBox(height: 12.0),
Text('Address'),
SizedBox(height: 12.0),
Text('Dropdown'),
SizedBox(height: 12.0),
Text('Phone'),
SizedBox(height: 24.0),
Text('con btn'),
],
),
),
);
final body = Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.5, 1.0],
colors: [
Color(0xFF03B898),
Color(0xFF01816B),
],
),
),
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.25,
),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(50),
),
),
child: form, //Text('this text here'),
),
],
),
Positioned(
right: 30,
top: 150,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(50)),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.camera_alt,
color: Colors.white,
),
Text(
'Upload Image',
style: TextStyle(fontSize: 10, color: Colors.white),
)
],
),
),
),
],
));
return Scaffold(
body: SingleChildScrollView(child: body),
);
}
}
Let me know if it works
You can use the following snippet to create a button on click of which the user will be prompted to select an image (either from gallery or camera)
class Layout extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF03B898),
body: Stack(
children: <Widget>[
Card(
margin: EdgeInsets.only(top: 150),
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(50),
),
),
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
),
Positioned(
top: 120,
right: 30,
child: RawMaterialButton(
shape: CircleBorder(),
fillColor: Color(0xFF03B898),
onPressed: () async {
final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
},
padding: EdgeInsets.all(30.0),
child: Icon(
Icons.camera_alt,
color: Colors.white,
),
),
),
],
),
);
}
}
I have used the Image Picker library to select the image.
I really need you because I don't have even start idea how to implement these, and also I am not sure how it is called.
Actually, I want to implement something similar like on image (this little circle in each of cards - that is like chain between two cards).
With help of key I have made image from up with this code:
class InfoPage extends StatefulWidget {
InfoPage();
#override
_InfoPageState createState() => _InfoPageState();
}
class _InfoPageState extends State<InfoPage> {
InfoItemModel infoData = dataSourceInfoUser;
double basicSize = 70;
#override
initState() {
super.initState();
}
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Container(
color: Colors.white,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
child: AppCardField(
child: Text('Something'),
),
),
_buildCardWithCircle(
bgCircleX: 0.78,
bgCirceY: -2.0,
innerContainerX: 0.756,
innerContainerY: -1.78,
colorInner: Colors.orange
),
],
),
),
),
);
_buildCardWithCircle({double bgCircleX, double bgCirceY, double innerContainerX, double innerContainerY, Color colorInner}) => Container(
width: double.infinity,
height: 150,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
child: AppCardField(
child: Text('Something'),
),
),
Align(
alignment: Alignment(bgCircleX, bgCirceY),
child: Container(
height: basicSize,
width: basicSize,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50.0),
),
),
),
Align(
alignment: Alignment(innerContainerX, innerContainerY),
child: Container(
height: basicSize - 10,
width: basicSize - 10,
decoration: BoxDecoration(
color: colorInner,
borderRadius: BorderRadius.circular(50.0),
),
child: Icon(Icons.vertical_align_center),
),
),
],
),
);
}
class AppCardField extends StatelessWidget {
final Widget child;
final double height;
final double paddingVertical, paddingHorizontal;
final double paddingVerticalChild, paddingHorizontalChild;
AppCardField({
this.child,
this.height,
this.paddingVertical = 8,
this.paddingHorizontal = 16,
this.paddingVerticalChild = 8,
this.paddingHorizontalChild = 16,
Key key})
: super(key: key);
#override
Widget build(BuildContext context) => Padding(
padding: EdgeInsets.symmetric(
vertical: paddingVertical, horizontal: paddingHorizontal),
child: Container(
height: height,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.all(Radius.circular(8)),
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 15.0,
offset: Offset(0.0, 5.0),
),
],
),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: paddingVerticalChild,
horizontal: paddingHorizontalChild),
child: child,
),
));
}
But here, I have problem with shadow of the card and strongly white background of circle, OFC I need this shadow to be also in this white space, question is how to solve this?
Something like this
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Some Stuff"),
),
body: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 20.0
)
]
),
child: Card(
elevation: 20.0,
color: Colors.blueGrey,
child: Text('Something'),
),
),
SizedBox(height: 10.0,),
Container(
width: double.infinity,
height: 150.0,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 150.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 20.0
)
]
),
child: Card(
elevation: 20.0,
color: Colors.blueGrey,
child: Text('Something'),
),
),
Align(
alignment: Alignment(0.9,-1.5),
child: Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
),
),
Align(
alignment: Alignment(0.88,-1.35),
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(25.0),
),
),
),
Align(
alignment: Alignment(0.85, -1.2),
child: Icon(Icons.access_alarms, color: Colors.white,)
),
],
),
),
],
),
),
);
then you just reaped the card for the other once with different alignment values.