Created
May 2, 2020 23:45
-
-
Save fabioselau077/07f5ebf543c4ab6c658fa48130d759dd to your computer and use it in GitHub Desktop.
Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(TabBarDemo()); | |
| } | |
| class TabBarDemo extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| home: Scaffold( | |
| body: Column(children: <Widget>[ | |
| Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: <Widget>[ | |
| Padding( | |
| padding: EdgeInsets.only(left: 15), | |
| child: Text( | |
| "Populares", | |
| style: TextStyle( | |
| fontSize: 23, | |
| color: Colors.black, | |
| fontFamily: 'Roboto-Regular'), | |
| ), | |
| ), | |
| Container( | |
| alignment: AlignmentDirectional.center, | |
| width: 100, | |
| height: 30, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.circular(12), color: Colors.white), | |
| margin: EdgeInsets.only(right: 15), | |
| child: Row( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: <Widget>[ | |
| Text( | |
| "Ver Tudo", | |
| style: TextStyle(color: Colors.grey), | |
| ), | |
| Icon( | |
| Icons.add, | |
| color: Colors.grey, | |
| ) | |
| ], | |
| )) | |
| ], | |
| ), | |
| SizedBox( | |
| height: 10, | |
| ), | |
| SingleChildScrollView( | |
| scrollDirection: Axis.horizontal, | |
| child: Row( | |
| mainAxisAlignment: MainAxisAlignment.start, | |
| children: <Widget>[ | |
| Container( | |
| margin: EdgeInsets.only(left: 15), | |
| height: 250, | |
| width: 200, | |
| decoration: BoxDecoration( | |
| color: Colors.white, | |
| borderRadius: BorderRadius.circular(25)), | |
| child: Column( | |
| children: <Widget>[ | |
| Container( | |
| height: 150, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.only( | |
| topLeft: Radius.circular(12), | |
| topRight: Radius.circular(12)), | |
| gradient: LinearGradient( | |
| begin: Alignment.topCenter, | |
| end: Alignment.bottomCenter, | |
| colors: [ | |
| Color(0xFF73AEF5), | |
| Color(0xFF61A4F1), | |
| Color(0xFF478DE0), | |
| Color(0xFF398AE5), | |
| ], | |
| stops: [0.1, 0.4, 0.7, 0.9], | |
| ), | |
| image: DecorationImage( | |
| image: NetworkImage( | |
| "https://images.unsplash.com/photo-1519069060891-f8c50519bf39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"), | |
| fit: BoxFit.cover, | |
| colorFilter: ColorFilter.mode( | |
| Colors.black.withOpacity(0.2), BlendMode.dstATop), | |
| ), | |
| ), | |
| ), | |
| Padding( | |
| padding: EdgeInsets.only(left: 10), | |
| child: Text( | |
| "Fundamentos em WhatsApp Business", | |
| style: TextStyle( | |
| fontWeight: FontWeight.bold, | |
| fontStyle: FontStyle.italic, | |
| fontSize: 16), | |
| ), | |
| ), | |
| SizedBox( | |
| height: 15, | |
| ), | |
| Align( | |
| alignment: AlignmentDirectional.bottomStart, | |
| child: Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: <Widget>[ | |
| Padding( | |
| padding: EdgeInsets.only(left: 10), | |
| child: Text("Iniciante")), | |
| Container( | |
| margin: EdgeInsets.only(right: 10), | |
| alignment: AlignmentDirectional.center, | |
| height: 30, | |
| width: 70, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.circular(20), | |
| color: Colors.blue, | |
| ), | |
| child: GestureDetector( | |
| child: Text( | |
| "Iniciar", | |
| style: TextStyle(color: Colors.white), | |
| ), | |
| )) | |
| ], | |
| )) | |
| ], | |
| )), | |
| Container( | |
| margin: EdgeInsets.only(left: 15), | |
| height: 250, | |
| width: 200, | |
| decoration: BoxDecoration( | |
| color: Colors.white, | |
| borderRadius: BorderRadius.circular(25)), | |
| child: Column( | |
| children: <Widget>[ | |
| Container( | |
| height: 150, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.only( | |
| topLeft: Radius.circular(12), | |
| topRight: Radius.circular(12)), | |
| gradient: LinearGradient( | |
| begin: Alignment.topCenter, | |
| end: Alignment.bottomCenter, | |
| colors: [ | |
| Color(0xFF73AEF5), | |
| Color(0xFF61A4F1), | |
| Color(0xFF478DE0), | |
| Color(0xFF398AE5), | |
| ], | |
| stops: [0.1, 0.4, 0.7, 0.9], | |
| ), | |
| image: DecorationImage( | |
| image: NetworkImage( | |
| "https://images.unsplash.com/photo-1519069060891-f8c50519bf39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"), | |
| fit: BoxFit.cover, | |
| colorFilter: ColorFilter.mode( | |
| Colors.black.withOpacity(0.2), BlendMode.dstATop), | |
| ), | |
| ), | |
| ), | |
| Padding( | |
| padding: EdgeInsets.only(left: 10), | |
| child: Text( | |
| "Fundamentos em WhatsApp Business", | |
| style: TextStyle( | |
| fontWeight: FontWeight.bold, | |
| fontStyle: FontStyle.italic, | |
| fontSize: 16), | |
| ), | |
| ), | |
| SizedBox( | |
| height: 15, | |
| ), | |
| Align( | |
| alignment: AlignmentDirectional.bottomStart, | |
| child: Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: <Widget>[ | |
| Padding( | |
| padding: EdgeInsets.only(left: 10), | |
| child: Text("Iniciante")), | |
| Container( | |
| margin: EdgeInsets.only(right: 10), | |
| alignment: AlignmentDirectional.center, | |
| height: 30, | |
| width: 70, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.circular(20), | |
| color: Colors.blue, | |
| ), | |
| child: GestureDetector( | |
| child: Text( | |
| "Iniciar", | |
| style: TextStyle(color: Colors.white), | |
| ), | |
| onTap: () {}, | |
| )) | |
| ], | |
| )) | |
| ], | |
| )), | |
| Container( | |
| margin: EdgeInsets.only(left: 15), | |
| height: 250, | |
| width: 200, | |
| decoration: BoxDecoration( | |
| color: Colors.white, | |
| borderRadius: BorderRadius.circular(25)), | |
| child: Column( | |
| children: <Widget>[ | |
| Container( | |
| height: 150, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.only( | |
| topLeft: Radius.circular(12), | |
| topRight: Radius.circular(12)), | |
| gradient: LinearGradient( | |
| begin: Alignment.topCenter, | |
| end: Alignment.bottomCenter, | |
| colors: [ | |
| Color(0xFF73AEF5), | |
| Color(0xFF61A4F1), | |
| Color(0xFF478DE0), | |
| Color(0xFF398AE5), | |
| ], | |
| stops: [0.1, 0.4, 0.7, 0.9], | |
| ), | |
| image: DecorationImage( | |
| image: NetworkImage( | |
| "https://images.unsplash.com/photo-1519069060891-f8c50519bf39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"), | |
| fit: BoxFit.cover, | |
| colorFilter: ColorFilter.mode( | |
| Colors.black.withOpacity(0.2), BlendMode.dstATop), | |
| ), | |
| ), | |
| ), | |
| Padding( | |
| padding: EdgeInsets.only(left: 10), | |
| child: Text( | |
| "Fundamentos em WhatsApp Business", | |
| style: TextStyle( | |
| fontWeight: FontWeight.bold, | |
| fontStyle: FontStyle.italic, | |
| fontSize: 16), | |
| ), | |
| ), | |
| SizedBox( | |
| height: 15, | |
| ), | |
| Align( | |
| alignment: AlignmentDirectional.bottomStart, | |
| child: Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
| children: <Widget>[ | |
| Padding( | |
| padding: EdgeInsets.only(left: 10), | |
| child: Text("Iniciante")), | |
| Container( | |
| margin: EdgeInsets.only(right: 10), | |
| alignment: AlignmentDirectional.center, | |
| height: 30, | |
| width: 70, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.circular(20), | |
| color: Colors.blue, | |
| ), | |
| child: GestureDetector( | |
| child: Text( | |
| "Iniciar", | |
| style: TextStyle(color: Colors.white), | |
| ), | |
| onTap: () {}, | |
| )) | |
| ], | |
| )) | |
| ], | |
| )), | |
| ], | |
| ), | |
| ), | |
| ]))); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment