DEV Community: Ranga Reddy

TCS Quick Shots

Ranga Reddy — Wed, 28 Oct 2020 07:34:33 +0000

For the last couple of days, I am observing the question pattern in TCS. I would like to share some tricks and tips to crack the question in less time.

I hereby declare that these shots are only helpful for some type of questions in the Exam.

As of now Quick Shots are available in only Python Programming Language.

Good to Know

### Quick Inputs
name = raw_input() # for Strings
number = int(input()) # for Integers

Yes or No Questions

def yes_or_no():
    reply = str(raw_input('(y/n):')).lower().strip()
    if reply[0] == 'y':
        return True
    if reply[0] == 'n':
        return False
    else:
        return None

isMember = yes_or_no()

if(isMember == None): 
    print("Invalid Input")

Accepting Values in Same line (with Spaces)

values = [int(x) for x in raw_input().split()]
print(values)

# input: 1 2 3 4
# output: [1, 2, 3, 4]

Accepting Values in Same line (with Commas)

values = [int(x) for x in raw_input().split(', ')]
print(values)

# input: 1, 2, 3, 4
# output: [1, 2, 3, 4]

Percentage Questions

# 85% of 2043.43

def percentage(part, whole):
    return (part * whole)/100

print(percentage(85,2043.43))

# output: 1736.9155

Invalid Input

INVALID INPUT
Note: Input and Output should be formatted as given for the example.
For any wrong value input display “INVALID INPUT”

def inv():
    print("INVALID INPUT")

inv() 

# This helps you in code reusability 
# avoid this if have one possibility

Float decimal value after a point

value = 3282.2548

print("%.f"%value) # 3282
print("%.1f"%value) # 3282.3
print("%.2f"%value) # 3282.25

Stay Tuned

If you like to improve your App Development Skills, even more in Flutter and SwiftUI. Feel free to dm me on Instagram or tweet to me on Twitter if you have any additional tips or feedback.

Thanks for reading!

Material Banner in Flutter

Ranga Reddy — Sat, 05 Sep 2020 13:33:49 +0000

Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

What is a Banner

A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires user action to be dismissed.

source: Material.io

Let's Build a Banner like this

This is actually what we going to make by the end of this article. Load up your energy and let's get started.

Material Banner

class BannerScreen extends StatefulWidget {
  @override
  _BannerScreenState createState() => _BannerScreenState();
}

class _BannerScreenState extends State<BannerScreen> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: kPrimaryColor,
        title: Text("Material Banner"),
        centerTitle: false,
      ),
      body: SafeArea(
          child: Column(
        children: [
            MaterialBanner(
              leading: CircleAvatar(
                backgroundColor: kPrimaryColor,
                child: Icon(
                  Icons.subscriptions,
                  color: Colors.white,
                ),
              ),
              content: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('WEEKLY RUNDOWN:',style: kHeadlineLabelStyle),
                    Padding(
                      padding: const EdgeInsets.only(top: 4.0),
                      child: Text('''
                    The case for a six-hour workday, An office model that suits everyone?, and other top news for you''',
                          style: kBodyTextStyle.copyWith(color: Colors.black)),
                    ),
                  ],
                ),
              ),
              actions: [
                FlatButton(
                  child: Text(
                    'DISMISS',
                    style: kActionTextStyle,
                  ),
                  onPressed: () {
                    // Dissmiss Function
                  },
                ),
                FlatButton(
                  child: Text('VIEW', style: kActionTextStyle),
                  onPressed: () {
                    // Custom implemention according to the banner.
                  },
                ),
              ],
            ),
          Spacer(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                onPressed: () {
                  // Dissmiss Function
                },
                child: Text(
                  'Toggle Banner',
                  style: kActionTextStyle,
                ),
              ),
            ],
          ),
          Spacer(),
        ],
      )),
    );
  }
}

Create a Stateful Widget and name it as BannerScreen and add MaterialBannerto the column of the Screen.
MaterialBanner has two @required properties those are content and actions.
content is the place where you add your message/context for the Banner.
actions we add buttons here one the them will be for dismissing the banner and other is an detail action related to banner.

Manage Banner State

bool showBanner = false;

Declare a showBanner property that manages the appearance of the banner.

if(showBanner)
MaterialBanner(...)

Write this if condition before banner, which shows banner only when showBanner is true
we have declared a property but we didn't implement to change the property.

Toggle Banner

  void _toggleBanner() {
    setState(() {
      showBanner = !showBanner;
    });
  }

_toggleBanner is a private function that changes the value of the showBanner property according to the context.
Add this function to the Dismiss Button and Toggle Banner Button.
Implement custom code for the other button in MaterialBanner actions which acts to the context of the banner.

Conclusion

Use Banner when it's necessary that you want to convey an important message to the user otherwise, use notifications.

GitHub Link

If you like to improve your App Development Skills, even more in Flutter and SwiftUI. Feel free to dm me on Instagram or tweet to me on Twitter if you have any additional tips or feedback.

Thanks for reading!

Custom Stepper in Flutter

Ranga Reddy — Sat, 29 Aug 2020 18:16:20 +0000

Stepper is a small UI Component but, a most useful component in Application Development to increment or decrement a value. People also call as Counter but, I am calling this has a Stepper because I came from an iOS Development background.

What is a Stepper?

A stepper is a two-buttons used to increase or decrease an incremental value. By default, one button of a stepper displays a plus symbol, and the other displays a minus symbol. These symbols can be replaced with custom images if desired.

Let's Build a Carousels like this:

This is actually what we going to make by the end of this article. Load up your energy and let's get started.

RoundedIconButton

class RoundedIconButton extends StatelessWidget {
  RoundedIconButton({@required this.icon, @required this.onPress, @required this.iconSize});

  final IconData icon;
  final Function onPress;
  final double iconSize;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      constraints: BoxConstraints.tightFor(width: iconSize, height: iconSize),
      elevation: 6.0,
      onPressed: onPress,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(iconSize*0.2)),
      fillColor: Color(0xFF65A34A),
      child: Icon(
        icon,
        color: Colors.white,
        size: iconSize * 0.8,
      ),
    );
  }
}

Create a StatelessWidget class and name it as RoundedIconButton

Declare the following properties:

  final IconData icon;
  final Function onPress;
  final double iconSize;

icon is an IconData datatype because we can't pass a string for icon name.
onPress property helps to write the functionality of the button.
iconSize is for making the button more dynamic.

We are returning a RawMaterialButton with common properties you see above like constraints, elevation and child etc..

Custom Stepper

Create a StatelessWidget name it as CustomStepper, we need a StatelessWidget because we often change properties of the Class i.e, incrementing or decrementing a value.

// ignore: must_be_immutable
class CustomStepper extends StatefulWidget {
  CustomStepper({
    @required this.lowerLimit,
    @required this.upperLimit,
    @required this.stepValue,
    @required this.iconSize,
    @required this.value,
  });

  final int lowerLimit;
  final int upperLimit;
  final int stepValue;
  final double iconSize;
  int value;

  @override
  _CustomStepperState createState() => _CustomStepperState();
}

class _CustomStepperState extends State<CustomStepper> {

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RoundedIconButton(
          icon: Icons.remove,
          iconSize: widget.iconSize,
          onPress: () {
            setState(() {
              widget.value =
                  widget.value == widget.lowerLimit ? widget.lowerLimit : widget.value -= widget.stepValue;
            });
          },
        ),
        Container(
          width: widget.iconSize,
          child: Text(
            '${widget.value}',
            style: TextStyle(
              fontSize: widget.iconSize * 0.8,
            ),
            textAlign: TextAlign.center,
          ),
        ),
        RoundedIconButton(
          icon: Icons.add,
          iconSize: widget.iconSize,
          onPress: () {
            setState(() {
              widget.value =
                  widget.value == widget.upperLimit ? widget.upperLimit : widget.value += widget.stepValue;
            });
          },
        ),
      ],
    );
  }
}

Declare the following properties:

lowerLimit property is where you can update the lower limit of the Stepper.
upperLimit property is where you can update the upper limit of the Stepper.
stepValue property is where you can update each step value of the Stepper.
iconSize property which will manage the whole structure of the Stepper.
value property will be updated each time after RoundedIconButton is Clicked.

Follow the steps to create a CustomStepper:

Create a Row with MainAxisAlignment to center
Add two RoundedIconButton's with passing add, remove icons, and functionalities respectively.
Functionalities:
- Increase the value by stepValue when addButton Clicked.
- Decrease the value by stepValue when removeButton Clicked.
- Ternary Operator is the best one to use in this case.
Give a Text label to the value property and place between the icons.

Here you see the actual CustomStepper.

UseCase Example

class StepperScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      backgroundColor: kPrimaryColor,
      title: Text("Custom Stepper"),
      centerTitle: false,
      ),
      body: SafeArea(
        child: Center(
          child: Container(
            height: 300,
                width: 200,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.0),
                  boxShadow: [
                    BoxShadow(
                      color: kShadowColor,
                      offset: Offset(0, 20),
                      blurRadius: 30.0),
                  ]
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.04),
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Image.asset('assets/images/fruit.png',fit: BoxFit.fitWidth,),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8.0,left: 8.0),
                child: Text('Juicy Strawberry',style: TextStyle(
                  color: Colors.black,
                  fontSize: 18.0,
                ),),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8.0,left: 8.0),
                child: Row(
                  children: [
                   Text('\$20.40',style: TextStyle(
                     color: Colors.black,
                     fontSize: 15.0,
                     fontWeight: FontWeight.bold,
                   ),), 
                Spacer(),
                CustomStepper()
                  ],
                ),
              ),

            ],
        ),
          )),
      ),
    );
  }
}

I used a simple example of a Grocery Cart where you can add the quantity of the Item through CustomStepper.

Conclusion

Stepper helps to increase and decrease the value easily. Use stepper for small values, for example, How many hour's you sleep per day?. On the other hand, it doesn’t make sense to use a stepper to How many miles you travel per day?.

GitHub Link

If you like to improve your App Development Skills, even more in Flutter and SwiftUI. Feel free to dm me on Instagram or tweet to me on Twitter if you have any additional tips or feedback.

Thanks for reading!

Carousels in Flutter

Ranga Reddy — Sat, 22 Aug 2020 17:40:35 +0000

Carousels are a great way to showcase different features of a product, advertise multiple products at once, or tell your brand story in chapters.

What is a Carousel?

A carousel is a Pin with multiple images and has a related short description for each image respectively which helps to convey context easily.

People see the carousel in their home feed just like any other Pin. They can swipe through the different images (or cards) directly from the feed. Or, they can tap on the Carousel and swipe through each card and its corresponding site, essentially swiping through the different landing pages.

Let's Build a Carousels like this

This is actually what we going to make by the end of this article. Load up your energy and let's get started.

Model Class

class TeslaCar {
  TeslaCar({this.model, this.image, this.description});

  String model;
  String image;
  String description;
}

We are going to creating a Tesla Car Carousel so we need to create a Model Class like above

model which describes the Model of the Car.
image will have a NetworkImage Url link of the Car.
description provides a description of the Car.

Array of Cars

var cars = [
  TeslaCar(
      model: 'Roadster',
      image: 'https://wallpaperaccess.com/full/1152734.jpg',
      description:
          'As an all-electric supercar, Roadster maximizes the potential of aerodynamic engineering—with record-setting performance and efficiency.'),
  TeslaCar(
      model: 'Model S',
      image: 'https://wallpapershome.com/images/pages/pic_v/8763.jpeg',
      description:
          "Model S sets an industry standard for performance and safety. Tesla’s all-electric powertrain delivers unparalleled performance in all weather conditions."),
  TeslaCar(
      model: 'Model 3',
      image: 'https://wallpapershome.com/images/pages/ico_v/20707.jpg',
      description:
          "Model 3 comes with the option of dual motor all-wheel drive, 20” Performance Wheels and Brakes and lowered suspension for total control, in all weather conditions."),
  TeslaCar(
      model: 'Model X',
      image:
          'https://images.hdqwalls.com/download/tesla-model-x-front-4k-5x-1080x1920.jpg',
      description:
          "Tesla’s all-electric powertrain delivers Dual Motor All-Wheel Drive, adaptive air suspension and the quickest acceleration of any SUV on the road—from zero to 60 mph in 2.6 seconds."),
  TeslaCar(
      model: 'Model Y',
      image:
          'https://www.autocar.co.uk/sites/autocar.co.uk/files/images/car-reviews/first-drives/legacy/model_y_front_34_blue.jpg',
      description:
          "Tesla All-Wheel Drive has two ultra-responsive, independent electric motors that digitally control torque to the front and rear wheels—for far better handling, traction and stability."),
  TeslaCar(
      model: 'Cyber Truck',
      image: 'https://img.wallpapersafari.com/phone/750/1334/65/24/BAlZne.jpg',
      description:
          "The powerful drivetrain and low center of gravity provides extraordinary traction control and torque—enabling acceleration from 0-60 mph in as little as 2.9 seconds."),
];

We need an array of Cars for Carousels which are created using TeslaCar Class

Carousel Card

// ignore: must_be_immutable
class CarouselCard extends StatelessWidget {
  CarouselCard({this.car});

  TeslaCar car;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.only(
          top: 32.0,
          left: 8.0,
          right: 8.0,
        ),
        child: Container(
          width: MediaQuery.of(context).size.width * 0.7,
          height: MediaQuery.of(context).size.height * 0.5,
          decoration: BoxDecoration(
            // color: Colors.redAccent,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                  color: kShadowColor, offset: Offset(0, 20), blurRadius: 10.0),
            ],
            image: DecorationImage(
                image: NetworkImage(car.image), fit: BoxFit.cover),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  width: 44,
                  height: 44,
                  child: Image.network(
                    'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/595px-Tesla_Motors.svg.png',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: <Widget>[
                    Spacer(),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          car.model,
                          style: kCardTitleStyle,
                        ),
                        Container(
                          height: 100,
                          width: MediaQuery.of(context).size.width * 0.6,
                          child: Text(
                            car.description,
                            style: kCardDescriptionTextStyle,
                            textAlign: TextAlign.end,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 5,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

We need a Carousel Card before creating a Carousel List So, follow the below steps to create a Carousel Card like above

Create a Stateless widget name it as CarouselCard
Declare a variable car of type TeslaCar because we are going pass TeslaCar object to get properties of the car
Create a Container with height and width properties. (Use your custom height and width, I used MediaQuery because these will be adjusted according to the screen size)
decoration is the property where we are going to give a borderRadius, boxShadow and image of the Card
In the child property we are going to rest of the things like Tesla logo, model name and description of the Car

Coursel List

class CarouselList extends StatefulWidget {
  @override
  _CarouselListState createState() => _CarouselListState();
}

class _CarouselListState extends State<CarouselList> {
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: kPrimaryColor,
        title: Text("Carousels"),
        centerTitle: false,
      ),
      body: Column(
        children: <Widget>[
          Spacer(),
          Container(
            height: MediaQuery.of(context).size.height * 0.6,
            width: double.infinity,
            child: PageView.builder(
              itemBuilder: (context, index) {
                return Opacity(
                  opacity: currentPage == index ? 1.0 : 0.8,
                  child: CarouselCard(
                    car: cars[index],
                  ),
                );
              },
              itemCount: cars.length,
              controller:
                  PageController(initialPage: 0, viewportFraction: 0.75),
              onPageChanged: (index) {
                setState(() {
                  currentPage = index;
                });
              },
            ),
          ),
          updateIndicators(),
          Spacer(),
          Column(
            children: <Widget>[
              Text('Flutter UI Component Library',style: kHeadlineLabelStyle,),
              Text('@irangareddy',style: kSubtitleStyle,)
            ],
          ),
          Spacer(),
        ],
      ),
    );
  }
}

We have successfully created a CarouselCard but we need to create a List before we actually witness the Carousels

Create a Stateful Widget and name it as CourselList.(You will shortly know, why we are created a StatefulWidget)
Create a Container and give a height > CarouselCard height and width = double.infinity because we know the height of the Card but don't know how much width occupies for list of the Cards
Here comes the important area child property, we are declaring a PageView

Important: About PageView(Skip if you know)

A PageView is almost like Lists but, it works page by page. I am using this to build Horizontal List.
Each child of a page view is forced to be the same size as the viewport.
You can use a PageController to control which page is visible in the view. In addition to being able to control the pixel offset of the content inside the PageView, a PageController also lets you control the offset in terms of pages, which are increments of the viewport size.
The PageController can also be used to control the PageController.initialPage, which determines which page is shown when the PageView is first constructed, and the PageController.viewportFraction, which determines the size of the pages as a fraction of the viewport size.

source: Flutter API Docs

These points give a clear idea of the PageView. I used these lines exactly form Docs because they are best.

Hope you got an exact idea of PageView

Back to Building the Carousel

With itembuilder property we are returning the cards of the list using index value
Assign the array length to itemCount
controller which manages view of the PageView using PageViewController and assign initialPage to 0(starting point), viewportFraction is default set to 1 i.e, each card occupies whole view. Change the viewportFraction to adjust the view.
create a currentPage variable to know the current page of the PageView and update the value in onPageChanged property
If you cleary observe the code we have an unimplemented updateIndicators() function

Adding Indicators

  Widget updateIndicators() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: cars.map(
        (car) {
          var index = cars.indexOf(car);
          return Container(
            width: 7.0,
            height: 7.0,
            margin: EdgeInsets.symmetric(horizontal: 6.0),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color:
                  currentPage == index ? Colors.red : Color(0xFFA6AEBD),
            ),
          );
        },
      ).toList(),
    );
  }

This an Indicators widget which helps users to know where they are and Total count of the Cards

Conclusion

Carousels convey context very fast and easy way to stick users with images and make advertising. You can further extend this as Navigating each card to a respective view and describing more about the context.

GitHub Link

If you like to improve your App Development Skills, even more in Flutter and SwiftUI. Feel free to dm me on Instagram or tweet to me on Twitter if you have any additional tips or feedback.

Thanks for reading!

How to Create a Context Menu in Flutter?

Ranga Reddy — Fri, 14 Aug 2020 13:19:46 +0000

Context Menu's most widely used UI Component in Mobile Development and with Flutter we can build it much more easily but, let's look at what is Contextual Menu is? (Contextual/Context referred as same)⁣

What is a Contextual Menu?⁣

A contextual menu is a type of menu that appears on demand and contains a small set of relevant actions related to a control, an area of the interface, a piece of data in the application, or a view of the application.⁣
⁣

Let's Build a Context Menu

This is actually what we going to make by the end of this article. Load up your energy and let's get started.

Create a List



const List<String> choices = <String>[
"Item 1",
"Item 2",
"Item 3",
];

The choices are a list of String that represents the items in the Context Menu.

Create a Stateful Widget



class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}


class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
        Text("Just Created a Stateful Widget")
    );
  }
}

MainScreen is a Stateful widget that manages the state of the context menu selection.

Add these Variables to _MainScreenState



  final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
  String _selectedChoices;

_scaffoldKey is a GlobalKey that provides access to ScaffoldState and this helps identify the state uniquely.
_selectedChoices is a String to store the current choice.

Note: underscore before a variable refers as a private variable in dart

Adding Context Menu to the MainScreen



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldkey,
      appBar: AppBar(
        title: Text('Context Menu'),
        elevation: 0,
        centerTitle: false,
        backgroundColor: kPrimaryColor,
        actions: <Widget>[
          PopupMenuButton(
            onSelected: _select,
            padding: EdgeInsets.zero,
            // initialValue: choices[_selection],
            itemBuilder: (BuildContext context) {
              return choices.map((String choice) {
                return  PopupMenuItem<String>(
                value: choice,
                child: Text(choice),
              );}
              ).toList();
            },
          )
        ],
      ),
      body: BodyWidget(selection: _selectedChoices),
    );
  }

We need to manage three things while adding the Context Menu

Assign the _scaffoldkey to the key property in the Scaffold.
Actions in AppBar
Body Content in MainScreen

Actions in AppBar

PopupMenuButton has itemBuilder property we use choices.map to load each item into PopupMenuItem and display the content with child property.

value is the property which will be returned to on selection of the item

PopupMenuButton has onSelection property which gets the choice of the selection from value and passes the value to _select function.

_select ```dart

void _select(String choice) {
setState(() {
_selectedChoices = choice;
});
showSnackBar(choice);
}

`_select` is a function that will be called from `onSelected` property of the `PopupMenuButton` which stores the choice of the user to a `_selectedChoices` and call's the `snowSnackBar`

- showSnackBar
```dart


void showSnackBar(String selection) {
    final snackBarContent = SnackBar(
            content: Text('Selected: $selection',style: kBodyTextStyle,),
            action: SnackBarAction(
              label: 'Undo',
              textColor: kSecondaryColor,
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );
    _scaffoldkey.currentState.showSnackBar(snackBarContent);
  }

showSnackBar is a function that accepts the current selection of the context menu an displays the SnackBar over a Scafolld using _scaffoldkey.currentState.showSnackBar(snackBarContent) and we can also add more functionality to the SnackBar with onPressed property.

Body Content in MainScreen



class BodyWidget extends StatelessWidget {
  const BodyWidget({
    Key key,
    @required String selection,
  }) : _selection = selection, super(key: key);

  final String _selection;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _selection != null ? 
        Center(child: Text("Selected: $_selection",style: kBodyTextStyle,),) : 
        Center(child: Text("Welcome to Flutter UI Components Library",style: kBodyTextStyle,),),
      ],
    );
  }
}

BodyWidget is a StatelessWidget class which accepts the _selection of the context menu and displays the current selection of the context menu if _selection is null then displays the sample text.

Conclusion

Adding Context Menu to the Application gives more flexibility to the user for smaller actions. With simple PopupMenuButton you easily add a Context Menu in a few lines of code. The functions help you add much more functionality to show a SnackBar and changing a state in the body.

GitHub Link

If you like to improve your App Development Skills, even more in Flutter and SwiftUI. Feel free to dm me on Instagram or tweet to me on Twitter if you have any additional tips or feedback.

Thanks for reading!

What's the best Programming language to learn?

Ranga Reddy — Sat, 01 Aug 2020 09:23:58 +0000

Hi there 👋,

My name is Ranga Reddy, I'm a software developer based in India, you can find me on Instagram, Twitter and LinkedIn.

I've been programming for 2 years, learned Swift, Dart, Python, JavaScript, and Java, and won few student competitions.

🎯 Straight to the point

It is a common question when you want to start programming as a career or second language to learn and also important to consider because it is always an investment of your time and brainpower. I'm here to make it simple and clear for you.

🚀 Goal

I am not going to tell you which language is best, You gonna decide which language you want to learn and why? by the end of this article.

💎 How to find the best one?

Let us consider each programming language as Car. Each Car is differed by following

Engine
Mileage
Speed
Market Area

Same as Programming languages do, each programming language is built for its purpose and capabilities to perform some set of operations. There is no best programming language. Each programming language has its pros and cons.

Now, you have more questions in the head, and its time to Switch.

🛠 Switch

Here we are finding a Treasure(The language that suits you). I want to make things much more clear likewise I've written in different scenarios and choose one that fits you.

Case 0: Before all this should I learn C Programming?

It depends on you, Initially, C is only the only Programming that serves a wide number of users so many people suggest you learn that but, It's 2020 I think not mandatory to learn it first. You can freely learn any language as the first language.
Case 1: Where and What to Start?

In this scenario, I think you're new to programming then answer the following questions to yourself.
- Have I ever inspired to build or create something?
- If, what is that area? (like web development, app development, data analytics, etc.)
By this time I think you have something rolling in your head. Keep it safe. We have Something todo.
Case 2: I have an interest in that field but, what should I learn?

In this case, you have an inspiration to build something then follow the below steps to find your treasure.
- Google like this Which programming languages help to a build Your Inspiration Placeholder(app/website)
Then know you will have plenty of languages in your hand (don't get tensed)
Case 3: How to choose one language?

Here you go with the final procedure to find your treasure. Now you have a handful of languages in hour hand. The language you select should the following characteristics

Please don't think why I have to do all this, This is your answer when some ask why did you choose this language?
- Top-ranked in the renowned programming languages ranking websites.
- Already mainstream and firmly established in the Software Development industry.
- Popularity is increasing or stable and not sharply decreasing.
- Does It have a large set of libraries, frameworks, tooling support, and have a large community.
- Does It have a demand in the job market with a good salary?

✌️Conclusion:

I hope you found the treasure and know the answer to why you choose that language.

If you love this article please like and share with your friends and community and comment on your chosen language after this.

♻️ Learn, Code, Enjoy.