Code examples (page 2)

Simple Layout #006

Here is the code:

class Example extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.start,
       children: [
         Container(
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(10),
             color: Colors.black),
           width: double.infinity,
           child: Padding(
             padding: const EdgeInsets.all(8.0),
             child: Column(
               children: [
                 Container(
             child: Image.network(
   'https://theflutterthing.files.wordpress.com/2020/10/the-flutter-thing-logo.png',
             width: double.infinity, height: 200),
             decoration:BoxDecoration(borderRadius: BorderRadius.circular(10))),
                 SizedBox(height: 5),
                 Divider(color: Colors.white, thickness: 1),
                 Row(
                   children: [
                     Expanded(
                       child: FlatButton.icon(
                           onPressed: () {},
                           icon: Icon(Icons.thumb_up, color: Colors.green),
                           label: Text('Like',
                               style: TextStyle(color: Colors.green))),),
                     SizedBox(width: 10),
                     Expanded(
                       child: FlatButton.icon(
                           onPressed: () {},
                           icon: Icon(Icons.thumb_down, color: Colors.red),
                           label: Text(
                             'Hate',
                             style: TextStyle(color: Colors.red),
                           )),),],
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly),],
             ),
           ),
         )
       ],
     );
   }
 }

Here is the result:


Simple Layout #007

Here is the code:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.black,
          ),
          width: double.infinity,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Container(
                  child: Image.network(
                    'https://theflutterthing.files.wordpress.com/2020/11/sergio.png',
                    width: double.infinity,
                    height: 200,
                  ),
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(10)),
                  height: 380,
                ),
                SizedBox(
                  height: 5,
                ),
                Container(
                  child: Text(
                    'Cousin Harris',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
                SizedBox(
                  height: 5,
                ),
                Divider(
                  color: Colors.white,
                  thickness: 1,
                ),
                Row(
                  children: [
                    Expanded(
                      child: FlatButton.icon(
                          onPressed: () {},
                          icon: Icon(Icons.call, color: Colors.green),
                          label:
                              Text('', style: TextStyle(color: Colors.green))),
                    ),
                    SizedBox(width: 10),
                    Expanded(
                      child: FlatButton.icon(
                          onPressed: () {},
                          icon: Icon(Icons.call_end, color: Colors.red),
                          label: Text(
                            '',
                            style: TextStyle(color: Colors.red),
                          )),
                    ),
                  ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}

Here is the result:


Simple layout #008

Here is the code:

class Example extends StatelessWidget {
  //using percent_indicator package from
  //https://pub.dev/packages/percent_indicator/
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20), color: Colors.grey),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "Circular Percentage example",
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 20,
          ),
          CircularPercentIndicator(
            radius: 180.0,
            lineWidth: 10.0,
            percent: 0.66,
            center: new Text("66%"),
            progressColor: Colors.blue,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
                "Here we can put some notes regarding the main circular percentage!"),
          ),
          SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              CircularPercentIndicator(
                radius: 60.0,
                lineWidth: 5.0,
                percent: 1.0,
                center: new Text("100%"),
                progressColor: Colors.green,
              ),
              CircularPercentIndicator(
                radius: 60.0,
                lineWidth: 5.0,
                percent: 0.5,
                center: new Text("50%"),
                progressColor: Colors.yellow,
              ),
              CircularPercentIndicator(
                radius: 60.0,
                lineWidth: 5.0,
                percent: 0.25,
                center: new Text("25%"),
                progressColor: Colors.red,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
                "Here we can put some final notes on the small circular percent indicators!"),
          ),
        ],
      ),
    );
  }
}

Here is the result:


Simple Layout #009

Here is the code:

class Example extends StatelessWidget {
  //using percent_indicator package from
  //https://pub.dev/packages/percent_indicator/
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20), color: Colors.amber),
      child: Column(
        children: [
          SizedBox(
            height: 10,
          ),
          Text(
            "Linear Percentage example",
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 5,
          ),
          Icon(
            Icons.insert_chart,
            size: 150,
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text("Stats:"),
              LinearPercentIndicator(
                width: 240.0,
                lineHeight: 24.0,
                percent: 0.66,
                center: new Text("66%"),
                progressColor: Colors.brown,
              ),
            ],
          ),
          SizedBox(
            height: 15,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text("Stats:"),
              LinearPercentIndicator(
                width: 240.0,
                lineHeight: 24.0,
                percent: 0.33,
                center: new Text("33%"),
                progressColor: Colors.blue,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
                "Here we can put some notes regarding the main linear percentage!"),
          ),
          SizedBox(
            height: 25,
          ),
          Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
            Text("Data 1: "),
            LinearPercentIndicator(
              width: 240.0,
              lineHeight: 15.0,
              percent: 1.0,
              center: new Text("100%"),
              progressColor: Colors.green,
            )
          ]),
          SizedBox(
            height: 15,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text("Data 2: "),
              LinearPercentIndicator(
                width: 240.0,
                lineHeight: 15.0,
                percent: 0.5,
                center: new Text("50%"),
                progressColor: Colors.yellow,
              ),
            ],
          ),
          SizedBox(
            height: 15,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text("Data 3: "),
              LinearPercentIndicator(
                width: 240.0,
                lineHeight: 15.0,
                percent: 0.25,
                center: new Text("25%"),
                progressColor: Colors.red,
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
                "Here we can put some final notes on the small linear percent indicators!"),
          ),
        ],
      ),
    );
  }
}

Here is the result:


Simple layout #010

This is the code:

class Example extends StatelessWidget {
  //using pie_chart package from
  //https://pub.dev/packages/pie_chart
  //need to import: import 'package:pie_chart/pie_chart.dart';
  Map<String, double> dataMap = {
    "Data 1": 10,
    "Data 2": 12,
    "Data 3": 15,
    "Data 4": 5,
    "Data 5": 20,
  };

  List<Color> colorList = [
    Colors.brown,
    Colors.green,
    Colors.blue,
    Colors.yellow,
    Colors.red,
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Text(
            "Ring chart values",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 20,
          ),
          PieChart(
            dataMap: dataMap,
            colorList: colorList,
            chartType: ChartType.ring,
            chartRadius: 180,
            legendOptions: LegendOptions(legendPosition: LegendPosition.right),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            "Pie chart values",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 10,
          ),
          PieChart(
            dataMap: dataMap,
            colorList: colorList,
            chartType: ChartType.disc,
            chartRadius: 180,
            legendOptions: LegendOptions(legendPosition: LegendPosition.left),
          ),
        ],
      ),
    );
  }
}

This is the result:


Create your website with WordPress.com
Get started
%d bloggers like this: