Having trouble in customizing text, text position, fontweight and etc - flutter

I'm having trouble customizing the font aspects, and position of my text in the code below. I want to put 'Bula Anvisa', centralized and bold, with a clickable link to its specific documents online. I begin "coding" this app in appinventor, there I had almost everything in order, but with flutter it's being very hard, although I'm loving learning this language. This is my first app and experience with code. After everything is in order, I'd like to make it a beautiful and fluid app. One step at a time.
I'm receiving the message
Too many positional arguments: 0 allowed, but 1 found.
Try removing the extra positional arguments.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class analgesicos extends StatefulWidget {
const analgesicos({Key? key}) : super(key: key);
#override
State<analgesicos> createState() => _analgesicosState();
}
class _analgesicosState extends State<analgesicos> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.teal,
centerTitle: true,
title: Text('Analgésicos',style: TextStyle(
fontFamily: 'fonts/Quicksand-Light.ttf',
fontSize: 22,
),),
),
body: Container(
constraints: const BoxConstraints(minHeight: 0, maxHeight: 200.0),
child: (
Column(crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(padding: const EdgeInsets.only(top: 10, bottom: 10),),
Container(width: 240.0,
height: 42.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: const Color(0xffc5fce1),
),
child: SizedBox(
child: Text(
'Não-opióides',
style: TextStyle(
fontFamily: 'Quicksand',
fontSize: 18,
color: Colors.black,
height: 1.7,
),
textAlign: TextAlign.center,
),
),
),
Divider(
height: 15),
const Material(
child: (const Card(
child: ListTile(
title: Text('Ácido acetilsalicílico'),
subtitle: Text('''Apresentação: Comprimidos simples de 500 ou 650 mg
Indicação: Antipirético e analgésico.
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 6/6 horas.'''),
),
)),
),
const Material(
child: (const Card(
color: Colors.white,
child: ListTile(
title: Text('Bula ANVISA'),
),
)),
),
],)
),
),
);
}
}

Related

How to center a Row containing wrapped text within a Column

I am having difficulty figuring how to get a Row, which contains wrapped text, to appear centered in a Column.
The issue seems to be that Flexible (or Expanded for that matter) causes the Text widget to consume the entire remaining horizontal space in the Row. This seems fine for text layout purposes, i.e., determining the needed height for the text. However, it also seems to me that is should be possible that once the text has been laid out, the bounds of its widget can be "shrunk" to require only the minimum width necessary. (Notice the difference of width/space within the red bounding box in the images below.)
Is it possible to achieve this in Flutter? What am I overlooking?
I have searched high and low on SO and haven't found this specific question.
The closest related might be this but it's difficult to be certain the way that question was asked. (And it did not receive any answers.)
What I am seeing
What I would like to see
What I have tried
Several permutations of Flexible and Expanded, around the Text, Row, and Column in various combinations
Several different values for fit and flex (with Flexible)
IntrinsicWidth parent on Column
softWrap
Code
(Based on the "Counter" sample from DartPad.)
// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
),
width: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'\u{1F603}',
style: TextStyle(
fontSize: 24.0,
),
),
Flexible(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
child: const Text(
'Some text that ends up taking_two_lines',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
),
],
),
],
),
),
);
}
}
Welp, as I was typing up this question, I discovered the solution, so I may as well write it up for others.
The trick was to use the textWidthBasis argument of Text and set it to TextWidthBasis.longestLine.
If you has parent widget set yours to center too
In my case i set My Colum(mainAlignment to center and it is work for me)
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
),
alignment: Alignment.center,
width: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'\u{1F603}',
style: TextStyle(
fontSize: 24.0,
),
),
Flexible(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
child: const Text(
'Some text that ends up taking_two_lines',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
),
],
),
],
),
),
Try below code hope its help to you I have try same as your expected design
Your Widget:
Scaffold(
appBar: AppBar(
actions: [
const Center(
child: Padding(
padding: EdgeInsets.all(8),
child: Text(
'Flutter',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
),
],
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(
width: 50,
),
const Text(
'\u{1F603}',
style: TextStyle(
fontSize: 24.0,
),
),
Expanded(
child: const Text(
'Some text that ends up taking_two_lines',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
],
),
],
),
),
Result Screen->

Flutter: How to prevent screen from scrolling and fit all widgets inside the screen

For some reason everything fits perfectly fine on my device but once using it on a smaller device with screen size 5.5" the screen is scrolling and some of the elements or widgets are outside the screen as shown in the images below. I have listed my code below as well.
How can I prevent this from happening and fit everything inside the screen, regardless the size of the screen?
class OtpVerificationScreen extends StatefulWidget {
const OtpVerificationScreen({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _OtpVerificationScreen();
}
class _OtpVerificationScreen extends State<OtpVerificationScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: SafeArea(
child: Center(
child: Column(
children: [
//Logo
const LogoForAuthScreens(),
const Text(
'Enter verification code',
style: TextStyle(
// fontWeight: FontWeight.bold,
fontSize: 26,
),
),
Container(
margin: const EdgeInsets.only(top: 30, bottom: 20),
child: const Text(
'We send a code to the following number:\n+01723456789',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black45,
),
),
),
Form(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
OtpInputField(),
OtpInputField(),
OtpInputField(),
OtpInputField(),
OtpInputField(),
OtpInputField(),
],
),
),
TextButton(
onPressed: () {},
child: const Text('Resend OTP'),
),
Container(
margin: const EdgeInsets.only(left: 30, top: 30, right: 30),
child: MaterialButton(
onPressed: () {
Navigator.of(context).pushNamed('/signup');
},
color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
padding:
const EdgeInsets.symmetric(vertical: 20, horizontal: 30),
minWidth: double.infinity,
child: const Text(
'Continue',
style: TextStyle(
color: Colors.white,
),
),
),
),
],
),
),
),
);
}
}
You can wrap each widget inside your column widget with a Flexible widget. This will cause them to resize dynamically based on the available space.

Make a list tile button turn grey when clicked

How can I make individual buttons turn grey when I click on approve?
The screenshot is below
Below is the List Tile widget code
Widget pendingList({
required String title,
required String subtitle,
required String leading,
onTap,
}) {
return Row(
children: [
Expanded(
flex: 6,
child: Card(
child: ListTile(
leading: Container(
padding: const EdgeInsets.only(left: 15.0),
alignment: Alignment.center,
height: 50,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: NetworkImage(
'therul'),
fit: BoxFit.cover,
),
),
),
title: Text(
title,
style: TextStyle(
fontSize: BtnFnt2,
fontWeight: FontWeight.w600,
),
),
subtitle: Text(
subtitle,
style: TextStyle(
fontSize: littleTexts,
),
),
),
),
),
Expanded(
flex: 2,
child: Bounce(
duration: const Duration(milliseconds: 100),
onPressed: onTap,
child: Container(
padding: const EdgeInsets.all(15.0),
color: appOrange,
child: Text(
'Approve',
style: TextStyle(
color: white,
fontWeight: FontWeight.w500,
),
),
),
),
),
],
);
}
How can I make individual buttons turn grey when I click on approve?
Any idea will be appreciated. Kindly refer to the screenshot and assist if you can.
One way, is to make the card into a stateful widget, like (simplified)
class ColorCard extends StatefulWidget {
const ColorCard({
Key? key,
}) : super(key: key);
#override
State<ColorCard> createState() => _ColorCardState();
}
class _ColorCardState extends State<ColorCard> {
Color col = Colors.white;
#override
Widget build(BuildContext context) {
return Card(
color: col,
child: ListTile(
title: const Text('title'),
subtitle: const Text('subtitle'),
trailing: ElevatedButton(
onPressed: () {
setState(() => col = Colors.grey);
},
child: const Text('click'),
),
),
);
}
}
Alternatively the color could be based on a value stored in an object that extends or 'mixin'-s ChangeNotifier if you want more comprehensive integration.

SingleChildScrollView still causes the screen to overflow

I have a simple screen built using the code shown below. I want to keep the ad banner at the top at all times while the Container() below it to be scrollable. This is the reason I put SingleChildScrollView() in the lower container.
But it still overflows the screen with the following error:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 162 pixels on the bottom.
This is what the screen looks like:
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
// colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
image: AssetImage("assets/feathers_bg.jpg"),
fit: BoxFit.cover,
),
),
child: Column(
children: [
AdmobBanner(
//below is test id
adUnitId: 'ca-app-pub-3940256099942544/6300978111',
adSize: AdmobBannerSize.FULL_BANNER,
),
Padding(
padding: const EdgeInsets.all(40.0),
child: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
padding: EdgeInsets.all(10),
child: Column(
children: [
Image.network(_birdDetails.thumbnail.source),
SizedBox(height: 10,),
Container(
child: Column(
children: [
Text(
_birdName,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.teal,
fontWeight: FontWeight.bold,
),
),
Text(
_birdDetails.description,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
),
),
],
),
),
SizedBox(height: 20,),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Text(
_birdDetails.extract,
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 16
),
),
),
SizedBox(height: 10,),
],
),
),
),
),
],
),
),
TL;DR version. Your SingleChildScrollView needs to be Expanded (you can put Expanded -> Padding - > SingleChildScrollView).
Longer version you can read in the official documentation, this section describes a similar scenario:
One common reason for this to happen is that the Column has been
placed in another Column (without using Expanded or Flexible around
the inner nested Column). When a Column lays out its non-flex children
(those that have neither Expanded or Flexible around them), it gives
them unbounded constraints so that they can determine their own
dimensions (passing unbounded constraints usually signals to the child
that it should shrink-wrap its contents). The solution in this case is
typically to just wrap the inner column in an Expanded to indicate
that it should take the remaining space of the outer column, rather
than being allowed to take any amount of room it desires.
And here is a bit simplified version of your code that is easily reproducible (to paste and run for example in dartpad):
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'SO Question : 64200763'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
StringBuffer birdDetails;
var rng = new Random();
#override
initState(){
super.initState();
birdDetails = new StringBuffer();
for(int i=0; i<4000; i++){
birdDetails.write(String.fromCharCode(rng.nextInt(25) + 97));
if(rng.nextBool() && rng.nextBool()) birdDetails.write(' ');
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
decoration: BoxDecoration(
color: Colors.green[400],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Column(
children: [
Container(
height: 100,
width: double.maxFinite,
color: Colors.yellow,
child: Text('Ad placeholder', textAlign: TextAlign.center)
),
Expanded(
child: Padding( // Here is your fix, place expanded above the SingleChildScrollView
padding: const EdgeInsets.all(40.0),
child: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
padding: EdgeInsets.all(10),
child: Column(
children: [
Image.network('https://picsum.photos/id/1024/512/288'),
SizedBox(height: 10,),
Container(
child: Column(
children: [
Text(
'Bird name',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.teal,
fontWeight: FontWeight.bold,
),
),
Text(
'Bird (random) description',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
),
),
],
),
),
SizedBox(height: 20,),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Text(
birdDetails.toString(),
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 16
),
),
),
SizedBox(height: 10,),
],
),
),
),
),
),
],
),
),
);
}
}
End result (as per how you organized the widgets, but without overflows):
PS, before posting a question I highly recommend stripping / replacing the code of all dependencies that some users might or might not have at hand (like AdMob), unnecessary assets (like AssetImage) and lastly class structures that aren't defined in the question (like birdDetails.thumbnail.source). It might help you debug the problem on your own and if it doesn't it makes it easier for people that are trying to help you ;).

Flutter: How to create smooth dropdown?

I am new to flutter and trying to make a list of dropdown where upon click the element smoothly toggle showing the inner list of the element.
Please ref the image attached for better understanding.
Following is my staring code.
import 'package:flutter/material.dart';
import 'package:lpa_exam/src/api/api_manager.dart';
class Practicetest extends StatefulWidget {
final examId;
Practicetest({Key key, this.examId});
#override
_PracticetestComp createState() => _PracticetestComp();
}
class _PracticetestComp extends State<Practicetest> {
List listofpracticetest;
void initState() {
super.initState();
APIManager.getpracticetestlist(widget.examId).then((resultpracticelist) {
setpracticetest(resultpracticelist);
});
}
void setpracticetest(value) {
setState(() {
listofpracticetest = value;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffF8FDF7),
appBar: AppBar(
backgroundColor: Color(0xffF8FDF7), // status bar color
brightness: Brightness.light,
elevation: 0.0,
leading: Container(
margin: EdgeInsets.only(left: 17),
child: RawMaterialButton(
onPressed: () {
Navigator.pushNamed(context, '/');
},
child: new Icon(
Icons.keyboard_backspace,
color: Colors.red[900],
size: 25.0,
),
shape: new CircleBorder(),
elevation: 4.0,
fillColor: Colors.white,
padding: const EdgeInsets.all(5.0),
),
),
),
body: Container(
// height: 200,
margin: EdgeInsets.only(top: 40, left: 30, right: 30),
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
dense: true,
contentPadding: EdgeInsets.all(0),
title: Text(
'Quick set of',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 18,
),
),
subtitle: Text(
'Practice Tests',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 22,
color: Colors.black),
)),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[300],
width: 1.0,
),
)),
margin: EdgeInsets.only(top: 30),
child: Container(
child: ListTile(
contentPadding: EdgeInsets.all(0),
leading: Text(
'Alegbra',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500),
),
trailing: Text('1 Submitted ',
style: TextStyle(color: Colors.grey)),
),
)),
],
)
],
),
));
}
}
P.S
So, the list I will be getting from api, currently trying to hard code for mock.
any reference or code will surely help me.
Thanks
Wrap your child under AnimatedContainer it Will do the rest for you and check the official documentation for more info
Found the perfect solution to the requirement of mock.
ExpansionPanelList Widget:
https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html
Render like this: