diff --git a/build.yaml b/build.yaml index 4f9ecc1..9630cb2 100644 --- a/build.yaml +++ b/build.yaml @@ -1,4 +1,3 @@ -# See https://github.com/dart-lang/build/tree/master/build_web_compilers#configuration targets: $default: builders: diff --git a/lib/screens/about/about_page.dart b/lib/screens/about/about_page.dart index ffb2265..ad7efa7 100644 --- a/lib/screens/about/about_page.dart +++ b/lib/screens/about/about_page.dart @@ -1,5 +1,8 @@ +import 'package:animated_card/animated_card.dart'; import 'package:flutter_web/cupertino.dart'; import 'package:flutter_web/material.dart'; +import 'package:flutter_web/widgets.dart'; +import 'package:flutterando_web/shared/model/about_model.dart'; import 'package:flutterando_web/shared/widgets/about_card/about_card.dart'; class AboutPage extends StatefulWidget { @@ -9,67 +12,159 @@ class AboutPage extends StatefulWidget { } class _AboutPageState extends State { + List aboutModel = [ + AboutModel( + title: 'test 1', + description: 'Testando descrinção', + image: 'icons/user.png'), + AboutModel( + title: 'test 1', + description: 'Testando descrinção', + image: 'icons/user.png'), + AboutModel( + title: 'test 1', + description: 'Testando descrinção', + image: 'icons/user.png'), + ]; + Size get size => MediaQuery.of(context).size; + @override Widget build(BuildContext context) { - var size = MediaQuery.of(context).size; - return Container( - decoration: BoxDecoration( - image: DecorationImage( - alignment: Alignment.bottomCenter, - image: AssetImage('images/shap.png'), - ), - gradient: LinearGradient(colors: [ - Color.fromRGBO(95, 95, 95, 1), - Color.fromRGBO(0, 85, 155, 1), - Color.fromRGBO(85, 200, 245, 1), - ]), - ), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Text( - 'Title', - style: TextStyle(color: Colors.white, fontSize: size.width * .05), + return Stack( + fit: StackFit.expand, + children: [ + Container( + decoration: BoxDecoration( + image: DecorationImage( + fit: BoxFit.fill, + image: AssetImage('images/team2.jpg'), + ), ), - Container( - width: size.width * .3, - child: Text( - '''SubTitle a,sdnasdkjnaskdjnaskdjnasldadk asdas das d sadmas dasmd saldasdasd adasd sad sakdj sakjds akdjs adjas dlsakdas md sadmasdasldasjdlakwqwea lsd sads ad sa ''', - style: TextStyle( - color: Colors.white, - fontSize: size.width * .01, - ), + ), + Container( + decoration: BoxDecoration( + image: DecorationImage( + alignment: Alignment.bottomCenter, + image: AssetImage('images/shap.png'), + ), + gradient: LinearGradient( + colors: [ + Color.fromRGBO(95, 95, 95, 0.8), + Color.fromRGBO(0, 85, 155, 0.8), + Color.fromRGBO(85, 200, 245, 0.8), + ], ), ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Spacer(flex: 2), - AboutCard( - title: 'Testando Title', - subTitle: - 'ALSKMD ALKSMDALK SDMALS DMAL SKD MAS LKDMA L SDKMA SLKD MASLKDMASL KDMASLKDMAL SDMALSKD MALSDM AS LDMASLKDMASLKDMAS LDKMSALDKAM SLD KASMD', - image: 'icons/users.png', - ), - Spacer(flex: 1), - AboutCard( - title: 'Testando Title', - subTitle: - 'ALSKMD ALKSMDALK SDMALS DMAL SKD MAS LKDMA L SDKMA SLKD MASLKDMASL KDMASLKDMAL SDMALSKD MALSDM AS LDMASLKDMASLKDMAS LDKMSALDKAM SLD KASMD', - image: 'icons/users.png', - ), - Spacer(flex: 1), - AboutCard( - title: 'Testando Title', - subTitle: - 'ALSKMD ALKSMDALK SDMALS DMAL SKD MAS LKDMA L SDKMA SLKD MASLKDMASL KDMASLKDMAL SDMALSKD MALSDM AS LDMASLKDMASLKDMAS LDKMSALDKAM SLD KASMD', - image: 'icons/users.png', - ), - Spacer(flex: 2), - ], - ) - ], - ), + child: LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth < 720) { + return Container( + child: Column( + children: [ + SizedBox(height: 20), + Text( + 'Title', + style: TextStyle(color: Colors.white, fontSize: 35), + ), + SizedBox(height: 10), + Container( + padding: EdgeInsets.all(10), + width: size.width * .5, + child: Text( + '''SubTitle a,sdnasdkjnaskdjnaskdjnasldadk asdas das d sadmas dasmd saldasdasd adasd sad sakdj sakjds akdjs adjas dlsakdas md sadmasdasldasjdlakwqwea lsd sads ad sa ''', + style: TextStyle( + color: Colors.white, + fontSize: 14, + ), + ), + ), + Expanded( + child: PageView.builder( + controller: PageController( + viewportFraction: 0.85, + initialPage: 1, + keepPage: true, + ), + itemCount: aboutModel.length, + itemBuilder: (context, index) { + return AboutCard( + title: aboutModel[index].title, + subTitle: aboutModel[index].description, + image: aboutModel[index].image, + ); + }, + ), + ), + SizedBox(height: 10) + ], + ), + ); + } else { + return Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Text( + 'Title', + style: TextStyle( + color: Colors.white, fontSize: size.width * .05), + ), + Container( + width: size.width * .4, + child: Text( + '''SubTitle a,sdnasdkjnaskdjnaskdjnasldadk asdas das d sadmas dasmd saldasdasd adasd sad sakdj sakjds akdjs adjas dlsakdas md sadmasdasldasjdlakwqwea lsd sads ad sa ''', + style: TextStyle( + color: Colors.white, + fontSize: size.width * .01, + ), + ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Spacer(flex: 2), + AnimatedCard( + initDelay: Duration(seconds: 1), + direction: AnimatedCardDirection.left, + duration: Duration(seconds: 1), + child: AboutCard( + title: 'Testando Title', + subTitle: + 'ALSKMD ALKSMDALK SDMALS DMAL SKD MAS LKDMA L SDKMA SLKD MASLKDMASL KDMASLKDMAL SDMALSKD MALSDM AS LDMASLKDMASLKDMAS LDKMSALDKAM SLD KASMD', + image: 'icons/user.png', + ), + ), + Spacer(flex: 1), + AnimatedCard( + initDelay: Duration(milliseconds: 500), + direction: AnimatedCardDirection.bottom, + duration: Duration(seconds: 1), + child: AboutCard( + title: 'Testando Title', + subTitle: + 'ALSKMD ALKSMDALK SDMALS DMAL SKD MAS LKDMA L SDKMA SLKD MASLKDMASL KDMASLKDMAL SDMALSKD MALSDM AS LDMASLKDMASLKDMAS LDKMSALDKAM SLD KASMD', + image: 'icons/user.png', + ), + ), + Spacer(flex: 1), + AnimatedCard( + initDelay: Duration(seconds: 1), + direction: AnimatedCardDirection.right, + duration: Duration(seconds: 1), + child: AboutCard( + title: 'Testando Title', + subTitle: + 'ALSKMD ALKSMDALK SDMALS DMAL SKD MAS LKDMA L SDKMA SLKD MASLKDMASL KDMASLKDMAL SDMALSKD MALSDM AS LDMASLKDMASLKDMAS LDKMSALDKAM SLD KASMD', + image: 'icons/user.png', + ), + ), + Spacer(flex: 2), + ], + ) + ], + ); + } + }), + ), + ], ); } } diff --git a/lib/screens/contact/components/Contact_Container.dart b/lib/screens/contact/components/Contact_Container.dart index bfc0aad..9135756 100644 --- a/lib/screens/contact/components/Contact_Container.dart +++ b/lib/screens/contact/components/Contact_Container.dart @@ -14,66 +14,78 @@ class _ContactContainerState extends State { Widget build(BuildContext context) { final Size size = MediaQuery.of(context).size; - return Container( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ContactTextTile( - title: Text( - "Contact with us", - style: Theme.of(context) - .textTheme - .title - .copyWith(fontWeight: FontWeight.bold), - ), - subtitle: Text( - "aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa" - "aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa" - "aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa", - style: Theme.of(context) - .textTheme - .body1 - .copyWith(color: Colors.grey), - ), - ), - ContactTextTile( - padding: const EdgeInsets.only(bottom: 8), - margin: const EdgeInsets.only(top: 15, bottom: 5), - title: Text( - "Head Office", - style: TextStyle( - fontSize: size.width * 0.012, - fontWeight: FontWeight.bold, + return LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return Container( + color: Colors.transparent, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ContactTextTile( + title: Text( + "Contact with us", + style: Theme.of(context) + .textTheme + .title + .copyWith(fontWeight: FontWeight.bold), + ), + subtitle: Text( + "aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa", + style: Theme.of(context) + .textTheme + .body1 + .copyWith(color: Colors.grey), + ), ), - ), - subtitle: Text( - "aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa" - "aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa" - "aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa", - style: - TextStyle(color: Colors.grey, fontWeight: FontWeight.normal), - ), - ), - ContactTile( - icon: Icon(Icons.phone), - text: Text( - "Phone: +61 2 8376 6284", - softWrap: true, - style: - TextStyle(color: Colors.grey, fontWeight: FontWeight.normal), - ), + ContactTile( + icon: Icon(Icons.phone), + text: Text( + "Phone: +61 2 8376 6284", + softWrap: true, + style: TextStyle( + color: Colors.grey, fontWeight: FontWeight.normal), + ), + ), + ContactTile( + icon: Icon(Icons.email), + text: Text( + "Email: hello@yourdomain.com", + softWrap: true, + style: TextStyle( + color: Colors.grey, fontWeight: FontWeight.normal), + ), + ), + ], ), - ContactTile( - icon: Icon(Icons.email), - text: Text( - "Email: hello@yourdomain.com", - softWrap: true, - style: - TextStyle(color: Colors.grey, fontWeight: FontWeight.normal), - ), + ); + } else { + return Container( + color: Colors.transparent, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ContactTile( + icon: Icon(Icons.phone), + text: Text( + "Phone: +61 2 8376 6284", + softWrap: true, + style: TextStyle( + color: Colors.grey, fontWeight: FontWeight.normal), + ), + ), + ContactTile( + icon: Icon(Icons.email), + text: Text( + "Email: hello@yourdomain.com", + softWrap: true, + style: TextStyle( + color: Colors.grey, fontWeight: FontWeight.normal), + ), + ), + ], ), - ], - ), - ); + ); + } + }); } } diff --git a/lib/screens/contact/components/bottom_bar.dart b/lib/screens/contact/components/bottom_bar.dart index af7747d..4f07a7f 100644 --- a/lib/screens/contact/components/bottom_bar.dart +++ b/lib/screens/contact/components/bottom_bar.dart @@ -10,47 +10,98 @@ class BottomBar extends StatefulWidget { class _BottomBarState extends State { @override Widget build(BuildContext context) { - return Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Image.asset( - 'images/logo-color.png', - fit: BoxFit.contain, - ), - SizedBox(height: 10), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, + return LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, children: [ - Spacer(), - CircularIconWidget( - color: Colors.black, - assetImage: 'social/facebook_f.png', + Image.asset( + 'images/logo-color-label-color.png', + fit: BoxFit.contain, + width: boxConstraints.maxHeight * 0.6, ), - SizedBox(width: 20), - CircularIconWidget( - color: Colors.black, - assetImage: 'social/medium_m.png', + SizedBox(height: 10), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Spacer(), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/facebook_f.png', + ), + SizedBox(width: 10), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/medium_m.png', + ), + SizedBox(width: 10), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/youtube_y.png', + ), + SizedBox(width: 10), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/linkedin_in.png', + ), + SizedBox(width: 10), + Spacer(), + ], ), - SizedBox(width: 20), - CircularIconWidget( - color: Colors.black, - assetImage: 'social/youtube_y.png', + SizedBox(height: 5), + Text( + '© copyright Flutterando', + style: TextStyle(color: Colors.black54), + ) + ], + ); + } else { + return Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Image.asset( + 'images/logo-color.png', + fit: BoxFit.contain, + width: boxConstraints.maxHeight * 0.6, ), - SizedBox(width: 20), - CircularIconWidget( - color: Colors.black, - assetImage: 'social/linkedin_in.png', + SizedBox(height: 10), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Spacer(), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/facebook_f.png', + ), + SizedBox(width: 10), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/medium_m.png', + ), + SizedBox(width: 10), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/youtube_y.png', + ), + SizedBox(width: 10), + CircularIconWidget( + color: Colors.black, + assetImage: 'social/linkedin_in.png', + ), + SizedBox(width: 10), + Spacer(), + ], ), - SizedBox(width: 20), - Spacer(), + SizedBox(height: 5), + Text( + '© copyright Flutterando', + style: TextStyle(color: Colors.black26), + ) ], - ), - SizedBox(height: 5), - Text( - '© copyright Flutterando', - style: TextStyle(color: Colors.black54), - ) - ], - ); + ); + } + }); } } diff --git a/lib/screens/contact/components/contact_form.dart b/lib/screens/contact/components/contact_form.dart index 542cc3d..ed339b6 100644 --- a/lib/screens/contact/components/contact_form.dart +++ b/lib/screens/contact/components/contact_form.dart @@ -1,7 +1,7 @@ import 'package:flutter_web/material.dart'; import 'package:flutterando_web/shared/widgets/contact_field/contact_field.dart'; - import '../contact_bloc.dart'; +import 'contact_container.dart'; class ContactForm extends StatefulWidget { ContactForm({Key key}) : super(key: key); @@ -31,124 +31,258 @@ class _ContactFormState extends State { final Size size = MediaQuery.of(context).size; return Container( + margin: EdgeInsets.symmetric(horizontal: 8), child: Form( key: _formKey, - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Reach us quickly", - style: Theme.of(context) - .textTheme - .title - .copyWith(fontWeight: FontWeight.bold), - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + child: LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.only(top: 8, bottom: 8, right: 8), - child: ContactField( - onSaved: _contactBloc.nameEvent.add, - hint: "Enter name", - hintStyle: TextStyle( - color: Colors.grey, - fontSize: size.width * 0.013, - fontWeight: FontWeight.bold), + Text( + "Reach us quickly", + style: Theme.of(context) + .textTheme + .title + .copyWith(fontWeight: FontWeight.bold), + ), + ContactContainer(), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Padding( + padding: + const EdgeInsets.only(top: 8, bottom: 8, right: 8), + child: ContactField( + onSaved: _contactBloc.nameEvent.add, + hint: "Enter name", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.013, + fontWeight: FontWeight.bold), + ), + ), + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only(top: 8, bottom: 8), + child: ContactField( + onSaved: _contactBloc.emailEvent.add, + hint: "Enter email", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.013, + fontWeight: FontWeight.bold), + ), + ), + ), + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Padding( + padding: + const EdgeInsets.only(top: 8, bottom: 8, right: 8), + child: ContactField( + onSaved: _contactBloc.phoneEvent.add, + hint: "Your Phone", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.013, + fontWeight: FontWeight.bold), + ), + ), + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only(top: 8, bottom: 8), + child: ContactField( + onSaved: _contactBloc.companyEvent.add, + hint: "Your company", + hintStyle: TextStyle( + fontSize: size.width * 0.013, + fontWeight: FontWeight.bold, + color: Colors.grey), + ), + ), ), + ], + ), + Padding( + padding: const EdgeInsets.only(top: 8.0), + child: Row( + children: [ + Expanded( + child: ContactField( + verticalCenter: false, + onSaved: _contactBloc.messageEvent.add, + hint: "Message", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.013, + fontWeight: FontWeight.bold), + height: size.height * 0.125, + ), + ), + ], ), ), - Expanded( - child: Padding( - padding: const EdgeInsets.only(top: 8, bottom: 8), - child: ContactField( - onSaved: _contactBloc.emailEvent.add, - hint: "Enter email", - hintStyle: TextStyle( - color: Colors.grey, - fontSize: size.width * 0.013, - fontWeight: FontWeight.bold), + Align( + alignment: Alignment.centerRight, + child: Container( + margin: const EdgeInsets.only(top: 10), + width: size.width * 0.125, + child: RaisedButton( + color: Colors.lightBlue, + child: Center( + child: Text( + "Send Message", + softWrap: true, + style: TextStyle( + color: Colors.white, + ), + ), + ), + onPressed: () { + _formKey.currentState.save(); + }, ), ), ), ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + ); + } else { + return Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.only(top: 8, bottom: 8, right: 8), - child: ContactField( - onSaved: _contactBloc.phoneEvent.add, - hint: "Your Phone", - hintStyle: TextStyle( - color: Colors.grey, - fontSize: size.width * 0.013, - fontWeight: FontWeight.bold), - ), - ), + Text( + "Reach us quickly", + style: Theme.of(context) + .textTheme + .title + .copyWith(fontWeight: FontWeight.bold), ), - Expanded( - child: Padding( - padding: const EdgeInsets.only(top: 8, bottom: 8), - child: ContactField( - onSaved: _contactBloc.companyEvent.add, - hint: "Your company", - hintStyle: TextStyle( - fontSize: size.width * 0.013, - fontWeight: FontWeight.bold, - color: Colors.grey), + ContactContainer(), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Padding( + padding: + const EdgeInsets.only(top: 8, bottom: 8, right: 8), + child: ContactField( + onSaved: _contactBloc.nameEvent.add, + hint: "Enter name", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.05, + fontWeight: FontWeight.bold), + ), + ), ), - ), + Expanded( + child: Padding( + padding: const EdgeInsets.only(top: 8, bottom: 8), + child: ContactField( + onSaved: _contactBloc.emailEvent.add, + hint: "Enter email", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.05, + fontWeight: FontWeight.bold), + ), + ), + ), + ], ), - ], - ), - Padding( - padding: const EdgeInsets.only(top: 8.0), - child: Row( - children: [ - Expanded( - child: ContactField( - verticalCenter: false, - onSaved: _contactBloc.messageEvent.add, - hint: "Message", - hintStyle: TextStyle( - color: Colors.grey, - fontSize: size.width * 0.013, - fontWeight: FontWeight.bold), - height: size.width * 0.125, + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Padding( + padding: + const EdgeInsets.only(top: 8, bottom: 8, right: 8), + child: ContactField( + onSaved: _contactBloc.phoneEvent.add, + hint: "Your Phone", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.05, + fontWeight: FontWeight.bold), + ), + ), + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only(top: 8, bottom: 8), + child: ContactField( + onSaved: _contactBloc.companyEvent.add, + hint: "Your company", + hintStyle: TextStyle( + fontSize: size.width * 0.05, + fontWeight: FontWeight.bold, + color: Colors.grey), + ), + ), ), + ], + ), + Padding( + padding: const EdgeInsets.only(top: 8.0), + child: Row( + children: [ + Expanded( + child: ContactField( + verticalCenter: false, + onSaved: _contactBloc.messageEvent.add, + hint: "Message", + hintStyle: TextStyle( + color: Colors.grey, + fontSize: size.width * 0.05, + fontWeight: FontWeight.bold), + height: size.height * 0.15, + ), + ), + ], ), - ], - ), - ), - Align( - alignment: Alignment.centerRight, - child: Container( - margin: const EdgeInsets.only(top:10), - width: size.width * 0.125, - child: RaisedButton( - color: Colors.grey[700], - child: Center( - child: Text( - "Send Message", - softWrap: true, - style: TextStyle( - color: Colors.white, + ), + Align( + alignment: Alignment.centerRight, + child: Padding( + padding: const EdgeInsets.only(top: 8), + child: InkWell( + onTap: () { + _formKey.currentState.save(); + }, + child: Card( + color: Colors.transparent, + child: Container( + color: Colors.lightBlue, + height: 25, + width: size.width * 0.3, + child: Center( + child: Text( + "Send Message", + softWrap: true, + style: TextStyle( + color: Colors.white, + ), + ), + ), + ), ), ), ), - onPressed: () { - _formKey.currentState.save(); - }, ), - ), - ), - ], - ), + ], + ); + } + }), ), ); } diff --git a/lib/screens/contact/components/contact_text_tile.dart b/lib/screens/contact/components/contact_text_tile.dart index fe94298..d2e6272 100644 --- a/lib/screens/contact/components/contact_text_tile.dart +++ b/lib/screens/contact/components/contact_text_tile.dart @@ -1,4 +1,3 @@ - import 'package:flutter_web/material.dart'; class ContactTextTile extends StatelessWidget { @@ -20,7 +19,7 @@ class ContactTextTile extends StatelessWidget { Widget build(BuildContext context) { return Container( margin: margin, - color: color ?? Colors.white, + color: color ?? Colors.transparent, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/lib/screens/contact/components/contact_tile.dart b/lib/screens/contact/components/contact_tile.dart index 8866cf5..129afed 100644 --- a/lib/screens/contact/components/contact_tile.dart +++ b/lib/screens/contact/components/contact_tile.dart @@ -1,4 +1,3 @@ - import 'package:flutter_web/material.dart'; class ContactTile extends StatelessWidget { @@ -11,7 +10,7 @@ class ContactTile extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - color: color ?? Colors.white, + color: color ?? Colors.transparent, height: 35, child: Row( crossAxisAlignment: CrossAxisAlignment.center, diff --git a/lib/screens/contact/contact_page.dart b/lib/screens/contact/contact_page.dart index 652f873..025b7b0 100644 --- a/lib/screens/contact/contact_page.dart +++ b/lib/screens/contact/contact_page.dart @@ -1,7 +1,6 @@ import 'package:animated_card/animated_card.dart'; import 'package:flutter_web/material.dart'; import 'components/bottom_bar.dart'; -import 'components/contact_container.dart'; import 'components/contact_form.dart'; class ContactPage extends StatefulWidget { @@ -13,41 +12,58 @@ class ContactPage extends StatefulWidget { class _ContactPageState extends State { @override Widget build(BuildContext context) { - final Size size = MediaQuery.of(context).size; return Container( - padding: const EdgeInsets.all(15), - margin: EdgeInsets.only(top: size.width * 0.075), - child: Column( - children: [ - Expanded( - flex: 4, - child: Row( - children: [ - Spacer(flex: 1), - Expanded( - flex: 3, - child: AnimatedCard( - direction: AnimatedCardDirection.left, - initDelay: Duration(seconds: 0), - child: ContactContainer(), - ), + margin: EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 0), + child: LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth < 720) { + return Column( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + SizedBox(height: 10), + Expanded( + flex: 15, + child: AnimatedCard( + direction: AnimatedCardDirection.right, + initDelay: Duration(seconds: 0), + child: ContactForm(), ), - Spacer(flex: 1), - Expanded( - flex: 6, - child: AnimatedCard( - direction: AnimatedCardDirection.right, - initDelay: Duration(seconds: 0), - child: ContactForm(), - ), + ), + Expanded( + flex: 4, + child: AnimatedCard( + direction: AnimatedCardDirection.bottom, + initDelay: Duration(seconds: 0), + child: BottomBar(), ), - Spacer(flex: 1), - ], - ), - ), - Expanded(flex: 2, child: BottomBar()) - ], - ), + ), + SizedBox(height: 1), + ], + ); + } else { + return Column( + children: [ + SizedBox(height: 5), + Expanded( + flex: 15, + child: AnimatedCard( + direction: AnimatedCardDirection.right, + initDelay: Duration(seconds: 0), + child: ContactForm(), + ), + ), + Expanded( + flex: 5, + child: AnimatedCard( + direction: AnimatedCardDirection.bottom, + initDelay: Duration(seconds: 0), + child: BottomBar(), + ), + ), + SizedBox(height: 5), + ], + ); + } + }), ); } -} \ No newline at end of file +} diff --git a/lib/screens/home/home_page.dart b/lib/screens/home/home_page.dart index 983b335..dd1b789 100644 --- a/lib/screens/home/home_page.dart +++ b/lib/screens/home/home_page.dart @@ -1,4 +1,5 @@ import 'package:flutter_web/material.dart'; +import 'package:flutter_web/widgets.dart'; import 'package:flutterando_web/shared/widgets/animated_text_kit/rotate.dart'; import 'package:flutterando_web/shared/widgets/animated_text_kit/typer.dart'; @@ -12,76 +13,179 @@ class _HomePageState extends State { @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; - return Container( - decoration: BoxDecoration( - image: DecorationImage( - alignment: Alignment.bottomCenter, - fit: BoxFit.contain, - image: AssetImage('images/shape-bg.png'), - ), - gradient: LinearGradient(colors: [ - Color.fromRGBO(95, 95, 95, 1), - Color.fromRGBO(0, 85, 155, 1), - Color.fromRGBO(85, 200, 245, 1), - ], begin: Alignment.topLeft), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Container( - width: size.width * 0.5, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - 'Title: ', - style: TextStyle(color: Colors.white, fontSize: 50), - ), - RotateAnimatedTextKit( - isRepeatingAnimation: false, - text: ['Esse', 'é', 'o', 'Title'], - textStyle: TextStyle(color: Colors.white, fontSize: 50), - ), - ], + return LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return Stack( + fit: StackFit.expand, + children: [ + Container( + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient(colors: [ + Color.fromRGBO(95, 95, 95, 0.8), + Color.fromRGBO(0, 85, 155, 0.8), + Color.fromRGBO(85, 200, 245, 0.8), + ], begin: Alignment.topLeft), + ), + ), + decoration: BoxDecoration( + image: DecorationImage( + fit: BoxFit.fill, + image: AssetImage('images/team.jpg'), ), - TyperAnimatedTextKit( - isRepeatingAnimation: false, - duration: Duration(seconds: 3), - text: [ - 'Esse é o subtitle, testando tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho tamanho. ' - ], - textStyle: TextStyle(color: Colors.white, fontSize: 20), - ) - ], + ), ), - ), - Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Container( - width: size.width * 0.2, - child: Stack( - alignment: Alignment.center, + Container( + decoration: BoxDecoration( + image: DecorationImage( + alignment: Alignment.bottomCenter, + fit: BoxFit.contain, + image: AssetImage('images/shape-bg.png'), + ), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + width: size.width * 0.5, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'Title: ', + style: + TextStyle(color: Colors.white, fontSize: 50), + ), + RotateAnimatedTextKit( + isRepeatingAnimation: false, + text: ['Esse', 'é', 'o', 'Title'], + textStyle: + TextStyle(color: Colors.white, fontSize: 50), + ), + ], + ), + TyperAnimatedTextKit( + isRepeatingAnimation: false, + duration: Duration(seconds: 3), + text: [ + 'Esse é o subtitle, testando tamanho tamanho ' + ], + textStyle: TextStyle( + color: Colors.white, + fontSize: 24, + ), + ) + ], + ), + ), + Column( + mainAxisAlignment: MainAxisAlignment.center, children: [ - Image.asset( - 'images/logo-color.png', - fit: BoxFit.contain, - width: size.width * 0.1, - ), - Image.asset( - 'images/iphone-x-frame.png', - fit: BoxFit.contain, - width: size.width * 0.2, - ), + Container( + width: size.width * 0.2, + child: Stack( + alignment: Alignment.center, + children: [ + Image.asset( + 'images/logo-color.png', + fit: BoxFit.contain, + width: size.width * 0.1, + ), + Image.asset( + 'images/iphone-x-frame.png', + fit: BoxFit.contain, + width: size.width * 0.2, + ), + ], + )) ], - )) - ], - ), - ], - ), - ); + ), + ], + ), + ), + ], + ); + } else { + return Stack( + fit: StackFit.expand, + children: [ + Container( + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient(colors: [ + Color.fromRGBO(95, 95, 95, 0.8), + Color.fromRGBO(0, 85, 155, 0.8), + Color.fromRGBO(85, 200, 245, 0.8), + ], begin: Alignment.topLeft), + ), + ), + decoration: BoxDecoration( + image: DecorationImage( + fit: BoxFit.cover, + image: AssetImage('images/team.jpg'), + ), + ), + ), + Container( + decoration: BoxDecoration( + color: Colors.transparent, + image: DecorationImage( + alignment: Alignment.bottomCenter, + fit: BoxFit.contain, + image: AssetImage('images/shape-bg.png'), + ), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: size.width * 0.8, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.asset( + 'images/logo-color.png', + fit: BoxFit.contain, + width: size.width * 0.4, + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'Title: ', + style: + TextStyle(color: Colors.white, fontSize: 50), + ), + RotateAnimatedTextKit( + isRepeatingAnimation: false, + text: ['Esse', 'é', 'o', 'Title'], + textStyle: + TextStyle(color: Colors.white, fontSize: 50), + ), + ], + ), + TyperAnimatedTextKit( + isRepeatingAnimation: false, + duration: Duration(seconds: 3), + text: [ + 'Esse é o subtitle, testando tamanho tamanho ' + ], + textStyle: + TextStyle(color: Colors.white, fontSize: 24), + ) + ], + ), + ), + ], + ), + ), + ], + ); + } + }); } } diff --git a/lib/screens/start/components/tabbar/tabbar_component.dart b/lib/screens/start/components/tabbar/tabbar_component.dart index 46de640..1ea5687 100644 --- a/lib/screens/start/components/tabbar/tabbar_component.dart +++ b/lib/screens/start/components/tabbar/tabbar_component.dart @@ -1,3 +1,4 @@ +import 'package:animated_card/animated_card.dart'; import 'package:flutter_web/material.dart'; import 'package:flutterando_web/shared/mixins/after_layout_mixin.dart'; import 'package:flutterando_web/shared/models/tab_model.dart'; @@ -49,7 +50,9 @@ class _TabbarComponentState extends State : 0; double get page => scrollLoaded - ? (widget.controller.offset / viewMaxScrollExtent * (widget.tabs.length-1)) + ? (widget.controller.offset / + viewMaxScrollExtent * + (widget.tabs.length - 1)) : 0; double offsetFromIndex(int index) { @@ -106,24 +109,28 @@ class _TabbarComponentState extends State itemBuilder: (context, index) { var tab = widget.tabs[index]; bool isCurrent = page.round() == index; - return InkWell( - onTap: () => widget.controller.animateTo( - offsetFromIndex(index), - duration: Duration(milliseconds: 500), - curve: Curves.easeInOut, - ), - child: Container( - margin: - EdgeInsets.symmetric(horizontal: widget.customPadding), - alignment: Alignment.center, - width: itemWidth, - child: Text( - tab.title, - key: textKey[index], - style: TextStyle( - color: isCurrent - ? widget.textColor - : widget.textColor.withOpacity(0.8), + return AnimatedCard( + direction: AnimatedCardDirection.right, + duration: Duration(seconds: 1), + child: InkWell( + onTap: () => widget.controller.animateTo( + offsetFromIndex(index), + duration: Duration(milliseconds: 500), + curve: Curves.easeInOut, + ), + child: Container( + margin: EdgeInsets.symmetric( + horizontal: widget.customPadding), + alignment: Alignment.center, + width: itemWidth, + child: Text( + tab.title, + key: textKey[index], + style: TextStyle( + color: isCurrent + ? widget.textColor + : widget.textColor.withOpacity(0.8), + ), ), ), ), diff --git a/lib/screens/team/team_page.dart b/lib/screens/team/team_page.dart index 69b7d95..a3e091f 100644 --- a/lib/screens/team/team_page.dart +++ b/lib/screens/team/team_page.dart @@ -1,6 +1,7 @@ import 'package:flutter_web/material.dart'; +import 'package:flutterando_web/screens/team/team_page_item.dart'; +import 'package:flutterando_web/screens/team/team_page_transformer.dart'; import 'package:flutterando_web/shared/model/team.dart'; -import 'package:flutterando_web/shared/widgets/team_card/team_card.dart'; class TeamPage extends StatefulWidget { TeamPage({Key key}) : super(key: key); @@ -64,59 +65,17 @@ class _TeamPageState extends State { Widget build(BuildContext context) { _initBuild(); - return Column( - crossAxisAlignment: CrossAxisAlignment.stretch, + return Stack( children: [ - Expanded( - flex: 3, + Positioned( + top: 0, child: Container( - color: Color.fromRGBO(255, 255, 255, 1), - padding: EdgeInsets.all(10), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Text( - 'Nosso Time', - style: TextStyle( - fontSize: (size.width * .05), color: Colors.black), - textAlign: TextAlign.center, - ), - SizedBox(height: 3,), - Text( - 'Uma breve descrição desse projetos de progamadores aqui :D', - style: TextStyle( - fontSize: (size.width * .012), color: Colors.black), - textAlign: TextAlign.center, - ), - SizedBox(height: 10,), - Wrap( - alignment: WrapAlignment.center, - direction: Axis.horizontal, - spacing: 50, - runSpacing: 50, - children: [ - TeamCard(team: team[0], size: size), - TeamCard(team: team[1], size: size), - TeamCard(team: team[2], size: size), - TeamCard(team: team[3], size: size), - TeamCard(team: team[4], size: size), - TeamCard(team: team[5], size: size), - TeamCard(team: team[6], size: size), - ], - ), - ], - ), - ), - ), - Expanded( - flex: 1, - child: Container( - width: 100, + width: MediaQuery.of(context).size.width, + height: MediaQuery.of(context).size.height, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.fill, - alignment: Alignment.bottomCenter, + repeat: ImageRepeat.noRepeat, image: AssetImage('images/shap-r.png'), ), gradient: LinearGradient( @@ -127,12 +86,92 @@ class _TeamPageState extends State { ], ), ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - ), ), ), + LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return Container( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + SizedBox(height: 10), + Text( + 'Nosso Time', + style: TextStyle( + fontSize: (size.width * .04), color: Colors.white), + textAlign: TextAlign.center, + ), + SizedBox( + height: 20, + ), + Expanded( + child: PageTransformer( + pageViewBuilder: (context, visibilityResolver) { + return PageView.builder( + itemCount: team.length, + controller: PageController( + viewportFraction: 0.30, + initialPage: 3, + ), + itemBuilder: (context, index) { + final pageVisibility = + visibilityResolver.resolvePageVisibility(index); + return IntroPageItem( + teamModel: team[index], + pageVisibility: pageVisibility, + ); + }, + ); + }), + ) + ], + ), + ); + } else { + return Container( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + SizedBox(height: 10), + Text( + 'Nosso Time', + style: TextStyle( + fontSize: (size.width * .07), + color: Colors.white, + ), + textAlign: TextAlign.center, + ), + SizedBox( + height: 20, + ), + Expanded( + child: PageTransformer( + pageViewBuilder: (context, visibilityResolver) { + return PageView.builder( + itemCount: 7, + controller: PageController( + viewportFraction: 0.85, + initialPage: 3, + ), + itemBuilder: (context, index) { + final pageVisibility = + visibilityResolver.resolvePageVisibility(index); + return IntroPageItem( + teamModel: team[index], + pageVisibility: pageVisibility, + ); + }, + ); + }), + ) + ], + ), + ); + } + }), ], ); } -} \ No newline at end of file +} diff --git a/lib/screens/team/team_page_item.dart b/lib/screens/team/team_page_item.dart new file mode 100644 index 0000000..fa1bdf0 --- /dev/null +++ b/lib/screens/team/team_page_item.dart @@ -0,0 +1,121 @@ +import 'package:flutter_web/material.dart'; +import 'package:flutterando_web/screens/team/team_page_transformer.dart'; +import 'package:flutterando_web/shared/model/team.dart'; +import 'package:meta/meta.dart'; + +class IntroPageItem extends StatelessWidget { + IntroPageItem({ + @required this.teamModel, + @required this.pageVisibility, + }); + + final TeamModel teamModel; + final PageVisibility pageVisibility; + + Widget _applyTextEffects({ + @required double translationFactor, + @required Widget child, + }) { + final double xTranslation = pageVisibility.pagePosition * translationFactor; + + return Opacity( + opacity: pageVisibility.visibleFraction, + child: Transform( + alignment: FractionalOffset.topLeft, + transform: Matrix4.translationValues( + xTranslation, + 0.0, + 0.0, + ), + child: child, + ), + ); + } + + _buildTextContainer(BuildContext context) { + var textTheme = Theme.of(context).textTheme; + var categoryText = _applyTextEffects( + translationFactor: 300.0, + child: Text( + teamModel.getCargo, + style: textTheme.caption.copyWith( + color: Colors.white70, + fontWeight: FontWeight.bold, + letterSpacing: 2.0, + fontSize: 14.0, + ), + textAlign: TextAlign.center, + ), + ); + + var titleText = _applyTextEffects( + translationFactor: 200.0, + child: Padding( + padding: const EdgeInsets.only(top: 16.0), + child: Text( + teamModel.getDescricao, + style: textTheme.title + .copyWith(color: Colors.white, fontWeight: FontWeight.bold), + textAlign: TextAlign.center, + ), + ), + ); + + return Positioned( + bottom: 56.0, + left: 32.0, + right: 32.0, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + categoryText, + titleText, + ], + ), + ); + } + + @override + Widget build(BuildContext context) { + var image = Image.asset( + teamModel.getFoto, + fit: BoxFit.cover, + alignment: FractionalOffset( + 0.5 + (pageVisibility.pagePosition / 3), + 0.5, + ), + ); + + var imageOverlayGradient = DecoratedBox( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: FractionalOffset.bottomCenter, + end: FractionalOffset.topCenter, + colors: [ + const Color(0xFF000000), + const Color(0x00000000), + ], + ), + ), + ); + + return Padding( + padding: const EdgeInsets.symmetric( + vertical: 16.0, + horizontal: 8.0, + ), + child: Material( + elevation: 4.0, + borderRadius: BorderRadius.circular(8.0), + child: Stack( + fit: StackFit.expand, + children: [ + image, + imageOverlayGradient, + _buildTextContainer(context), + ], + ), + ), + ); + } +} diff --git a/lib/screens/team/team_page_transformer.dart b/lib/screens/team/team_page_transformer.dart new file mode 100644 index 0000000..58b49e8 --- /dev/null +++ b/lib/screens/team/team_page_transformer.dart @@ -0,0 +1,127 @@ +import 'package:flutter_web/material.dart'; +import 'package:meta/meta.dart'; + +/// A function that builds a [PageView] lazily. +typedef PageView PageViewBuilder( + BuildContext context, PageVisibilityResolver visibilityResolver); + +/// A class that can be used to compute visibility information about +/// the current page. +class PageVisibilityResolver { + PageVisibilityResolver({ + ScrollMetrics metrics, + double viewPortFraction, + }) : this._pageMetrics = metrics, + this._viewPortFraction = viewPortFraction; + + final ScrollMetrics _pageMetrics; + final double _viewPortFraction; + + /// Calculates visibility information for the page at [pageIndex]. + /// Used inside PageViews' itemBuilder, but can be also used in a + /// simple PageView that simply has an array of children passed to it. + PageVisibility resolvePageVisibility(int pageIndex) { + final double pagePosition = _calculatePagePosition(pageIndex); + final double visiblePageFraction = + _calculateVisiblePageFraction(pageIndex, pagePosition); + + return PageVisibility( + visibleFraction: visiblePageFraction, + pagePosition: pagePosition, + ); + } + + double _calculateVisiblePageFraction(int index, double pagePosition) { + if (pagePosition > -1.0 && pagePosition <= 1.0) { + return 1.0 - pagePosition.abs(); + } + + return 0.0; + } + + double _calculatePagePosition(int index) { + final double viewPortFraction = _viewPortFraction ?? 1.0; + final double pageViewWidth = + (_pageMetrics?.viewportDimension ?? 1.0) * viewPortFraction; + final double pageX = pageViewWidth * index; + final double scrollX = (_pageMetrics?.pixels ?? 3.0); + final double pagePosition = (pageX - scrollX) / pageViewWidth; + final double safePagePosition = !pagePosition.isNaN ? pagePosition : 0.0; + + if (safePagePosition > 1.0) { + return 1.0; + } else if (safePagePosition < -1.0) { + return -1.0; + } + + return safePagePosition; + } +} + +/// A class that contains visibility information about the current page. +class PageVisibility { + PageVisibility({ + @required this.visibleFraction, + @required this.pagePosition, + }); + + /// How much of the page is currently visible, between 0.0 and 1.0. + /// + /// For example, if only the half of the page is visible, the + /// value of this is going to be 0.5. + /// + /// This doesn't contain information about where the page is + /// disappearing to or appearing from. For that, see [pagePosition]. + final double visibleFraction; + + /// Tells the position of this page, relative to being visible in + /// a "non-dragging" position, between -1.0 and 1.0. + /// + /// For example, if the page is fully visible, this value equals 0.0. + /// + /// If the page is fully out of view on the right, this value is + /// going to be 1.0. + /// + /// Likewise, if the page is fully out of view, on the left, this + /// value is going to be -1.0. + final double pagePosition; +} + +/// A widget for getting useful information about a pages' position +/// and how much of it is visible in a PageView. +/// +/// Note: Does not transform pages in any way, but provides the means +/// to easily do it, in the form of [PageVisibility]. +class PageTransformer extends StatefulWidget { + PageTransformer({@required this.pageViewBuilder}); + + final PageViewBuilder pageViewBuilder; + + @override + _PageTransformerState createState() => _PageTransformerState(); +} + +class _PageTransformerState extends State { + PageVisibilityResolver _visibilityResolver; + + @override + Widget build(BuildContext context) { + final pageView = widget.pageViewBuilder( + context, _visibilityResolver ?? PageVisibilityResolver()); + + final controller = pageView.controller; + final viewPortFraction = controller.viewportFraction; + + return NotificationListener( + onNotification: (ScrollNotification notification) { + setState(() { + _visibilityResolver = PageVisibilityResolver( + metrics: notification.metrics, + viewPortFraction: viewPortFraction, + ); + }); + }, + child: pageView, + ); + } +} diff --git a/lib/shared/model/about_model.dart b/lib/shared/model/about_model.dart new file mode 100644 index 0000000..f497b15 --- /dev/null +++ b/lib/shared/model/about_model.dart @@ -0,0 +1,9 @@ +import 'package:flutter_web/widgets.dart'; + +class AboutModel { + final String title; + final String description; + final String image; + AboutModel( + {@required this.title, @required this.description, @required this.image}); +} diff --git a/lib/shared/model/team.dart b/lib/shared/model/team.dart index 02e4657..85606db 100644 --- a/lib/shared/model/team.dart +++ b/lib/shared/model/team.dart @@ -17,8 +17,8 @@ class TeamModel { 'descricao': this._descricao }; - String getNome() => this._nome; - String getFoto() => this._foto; - String getCargo() => this._cargo; - String getDescricao() => this._descricao; + String get getNome => this._nome; + String get getFoto => this._foto; + String get getCargo => this._cargo; + String get getDescricao => this._descricao; } diff --git a/lib/shared/widgets/about_card/about_card.dart b/lib/shared/widgets/about_card/about_card.dart index e0025a1..6969b04 100644 --- a/lib/shared/widgets/about_card/about_card.dart +++ b/lib/shared/widgets/about_card/about_card.dart @@ -15,39 +15,74 @@ class AboutCard extends StatelessWidget { @override Widget build(BuildContext context) { - var width = MediaQuery.of(context).size.width; - return Expanded( - flex: 5, - child: Card( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(45), - ), - elevation: 2, - child: Container( - padding: EdgeInsets.fromLTRB(20, 10, 20, 30), + return Card( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(45), + ), + elevation: 2, + child: LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return Container( + constraints: BoxConstraints(maxWidth: 250), + alignment: Alignment.center, child: Column( - mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, children: [ + SizedBox(height: 10), CircleAvatar( - maxRadius: 40, - minRadius: 1, + maxRadius: 60, child: Image.asset(image), ), - SizedBox(height: 30), + SizedBox(height: 10), Text( title, style: Theme.of(context).textTheme.title, softWrap: true, ), - SizedBox(height: 30), + SizedBox(height: 10), + Container( + padding: const EdgeInsets.all(15), + child: Text( + subTitle, + style: Theme.of(context).textTheme.overline, + softWrap: true, + ), + ) + ], + ), + ); + } else { + return Container( + constraints: BoxConstraints(maxWidth: 250, maxHeight: 300), + alignment: Alignment.center, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: 10), + CircleAvatar( + maxRadius: 60, + child: Image.asset(image), + ), + SizedBox(height: 10), Text( - subTitle, - style: Theme.of(context).textTheme.overline, + title, + style: Theme.of(context).textTheme.title, softWrap: true, + ), + SizedBox(height: 10), + Container( + padding: const EdgeInsets.all(15), + child: Text( + subTitle, + style: Theme.of(context).textTheme.overline, + softWrap: true, + ), ) ], ), - )), + ); + } + }), ); } } diff --git a/lib/shared/widgets/circular_icon/circular_icon_widget.dart b/lib/shared/widgets/circular_icon/circular_icon_widget.dart index d17b1b2..7384f31 100644 --- a/lib/shared/widgets/circular_icon/circular_icon_widget.dart +++ b/lib/shared/widgets/circular_icon/circular_icon_widget.dart @@ -15,26 +15,52 @@ class CircularIconWidget extends StatelessWidget { @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; - return ClipOval( - child: Container( - height: size.height * 0.05, - decoration: BoxDecoration( - color: color, - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - Theme.of(context).primaryColor, - Theme.of(context).accentColor, - ], + return LayoutBuilder(builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return ClipOval( + child: Container( + height: size.height * 0.05, + decoration: BoxDecoration( + color: color, + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Theme.of(context).primaryColor, + Theme.of(context).accentColor, + ], + ), + ), + padding: EdgeInsets.all(10), + child: AspectRatio( + aspectRatio: 1, + child: Image.asset(assetImage, fit: BoxFit.cover), + ), ), - ), - padding: EdgeInsets.all(10), - child: AspectRatio( - aspectRatio: 1, - child: Image.asset(assetImage, fit: BoxFit.cover), - ), - ), - ); + ); + } else { + return ClipOval( + child: Container( + height: size.height * 0.01, + decoration: BoxDecoration( + color: color, + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Theme.of(context).primaryColor, + Theme.of(context).accentColor, + ], + ), + ), + padding: EdgeInsets.all(10), + child: AspectRatio( + aspectRatio: 1, + child: Image.asset(assetImage, fit: BoxFit.cover), + ), + ), + ); + } + }); } } diff --git a/lib/shared/widgets/gradient_appbar/gradient_appbar_.dart b/lib/shared/widgets/gradient_appbar/gradient_appbar_.dart index c258189..e4b459a 100644 --- a/lib/shared/widgets/gradient_appbar/gradient_appbar_.dart +++ b/lib/shared/widgets/gradient_appbar/gradient_appbar_.dart @@ -11,32 +11,95 @@ class GradientAppBar extends StatefulWidget implements PreferredSizeWidget { } class _GradientAppBarState extends State { + Size get size => MediaQuery.of(context).size; + bool isOpenDrawer = false; @override Widget build(BuildContext context) { - double width = MediaQuery.of(context).size.width; - return Stack( - children: [ - Container( - decoration: BoxDecoration( - gradient: LinearGradient(colors: [ - Color.fromRGBO(95, 95, 95, 1), - Color.fromRGBO(0, 85, 155, 1), - Color.fromRGBO(85, 200, 245, 1), - ]), - ), - ), - Positioned.fill( - right: width * 0.60, - child: Image.asset(widget.image), - ), - Positioned( - right: width * 0.15, - child: Container( - height: 56, - child: widget.buttons, - ), - ), - ], + return LayoutBuilder( + builder: (context, boxConstraints) { + if (boxConstraints.maxWidth >= 720) { + return Stack( + children: [ + Container( + decoration: BoxDecoration( + gradient: LinearGradient(colors: [ + Color.fromRGBO(95, 95, 95, 1), + Color.fromRGBO(0, 85, 155, 1), + Color.fromRGBO(85, 200, 245, 1), + ]), + ), + ), + Positioned.fill( + right: size.width * 0.60, + child: Image.asset(widget.image), + ), + Positioned( + right: size.width * 0.15, + child: Container( + height: 56, + child: widget.buttons, + ), + ), + ], + ); + } else { + return Stack( + fit: StackFit.expand, + children: [ + Container( + decoration: BoxDecoration( + gradient: LinearGradient(colors: [ + Color.fromRGBO(95, 95, 95, 1), + Color.fromRGBO(0, 85, 155, 1), + Color.fromRGBO(85, 200, 245, 1), + ]), + ), + ), + if (!isOpenDrawer) ...{ + Positioned.fill( + child: Image.asset( + widget.image, + width: size.width * 0.08, + ), + ), + }, + Positioned( + left: isOpenDrawer ? size.width * 0.1 : 0, + right: isOpenDrawer ? 0 : size.width * 0.05, + child: AnimatedContainer( + curve: Curves.decelerate, + duration: Duration(seconds: 19), + height: 56, + child: isOpenDrawer ? widget.buttons : null, + ), + ), + Positioned( + left: -3, + child: AnimatedContainer( + duration: Duration(seconds: 10), + child: drawer(), + ), + ) + ], + ); + } + }, ); } + + Widget drawer() { + return IconButton( + icon: Icon( + isOpenDrawer ? Icons.clear : Icons.menu, + color: Colors.white, + ), + onPressed: openDrawer, + ); + } + + openDrawer() { + setState(() { + isOpenDrawer = !isOpenDrawer; + }); + } } diff --git a/lib/shared/widgets/team_card/team_card.dart b/lib/shared/widgets/team_card/team_card.dart index e2c45a1..99289b7 100644 --- a/lib/shared/widgets/team_card/team_card.dart +++ b/lib/shared/widgets/team_card/team_card.dart @@ -3,39 +3,27 @@ import 'package:flutterando_web/shared/model/team.dart'; class TeamCard extends StatelessWidget { final TeamModel team; - var size; - TeamCard({this.team, this.size}); + TeamCard({this.team}); @override Widget build(BuildContext context) { - double width = (size.width * 0.20); - return Card( - elevation: 10, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(45) - ), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(45)), child: Container( padding: EdgeInsets.all(10), - width: width, + width: 200, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( constraints: BoxConstraints( - maxHeight: 200, - maxWidth: 200, - minHeight: 150, - minWidth: 150), - width: (width * 0.6), - height: (width * 0.6), + maxHeight: 100, maxWidth: 100, minHeight: 50, minWidth: 50), decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( - fit: BoxFit.fill, - image: ExactAssetImage(team?.getFoto()))), + fit: BoxFit.fill, image: ExactAssetImage(team?.getFoto))), ), SizedBox( height: 5, @@ -43,12 +31,12 @@ class TeamCard extends StatelessWidget { Padding( padding: const EdgeInsets.only(left: 10, right: 10), child: Text( - team?.getNome(), + team?.getNome, overflow: TextOverflow.clip, textAlign: TextAlign.center, style: TextStyle( color: Color.fromRGBO(47, 90, 125, 1.0), - fontSize: (size.width * .015), + fontSize: (14), fontWeight: FontWeight.w600), ), ), @@ -58,7 +46,7 @@ class TeamCard extends StatelessWidget { Padding( padding: const EdgeInsets.only(left: 10, right: 10), child: Text( - team.getCargo(), + team.getCargo, style: TextStyle(color: Color.fromRGBO(94, 94, 95, 1)), ), ) diff --git a/pubspec.yaml b/pubspec.yaml index 7d8b4cf..dc1ff39 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -3,7 +3,7 @@ description: An app built using Flutter for web environment: # You must be using Flutter >=1.5.0 or Dart >=2.3.0 - sdk: '>=2.3.0-dev.0.1 <3.0.0' + sdk: '>=2.3.0 <3.0.0' dependencies: flutter_web: any @@ -12,24 +12,13 @@ dependencies: rxdart: any dev_dependencies: - build_runner: ^1.4.0 - build_web_compilers: ^2.0.0 - pedantic: ^1.0.0 - + build_runner: any + build_web_compilers: any + pedantic: any flutter: uses-material-design: true -assets: - - assets/images/logo.png - - assets/images/team/alvaro.jpg - - assets/images/team/bwolf.jpg - - assets/images/team/david.jpg - - assets/images/team/gabriel.jpg - - assets/images/team/jacob.jpg - - assets/images/team/matheus.jpg - - assets/images/team/rully.jpg - - assets/images/team/jacob_.jpg - - assets/images/vectorpaint.png + dependency_overrides: flutter_web: @@ -40,8 +29,8 @@ dependency_overrides: git: url: https://github.com/flutter/flutter_web path: packages/flutter_web_ui - + animated_card: git: url: https://github.com/davidsdearaujo/animated_card - ref: web + ref: web \ No newline at end of file diff --git a/web/assets/icons/users.png b/web/assets/icons/user.png similarity index 100% rename from web/assets/icons/users.png rename to web/assets/icons/user.png diff --git a/web/assets/images/logo-color-label-color.png b/web/assets/images/logo-color-label-color.png new file mode 100644 index 0000000..3582ffb Binary files /dev/null and b/web/assets/images/logo-color-label-color.png differ diff --git a/web/assets/images/logo-color.png b/web/assets/images/logo-color.png index 3582ffb..37a7d5f 100644 Binary files a/web/assets/images/logo-color.png and b/web/assets/images/logo-color.png differ diff --git a/web/assets/images/shap-r.png b/web/assets/images/shap-r.png index e96e988..b65d923 100644 Binary files a/web/assets/images/shap-r.png and b/web/assets/images/shap-r.png differ diff --git a/web/assets/images/team.jpg b/web/assets/images/team.jpg new file mode 100644 index 0000000..f4b8e4d Binary files /dev/null and b/web/assets/images/team.jpg differ diff --git a/web/assets/images/team2.jpg b/web/assets/images/team2.jpg new file mode 100644 index 0000000..09f4e31 Binary files /dev/null and b/web/assets/images/team2.jpg differ